css設定div相對網頁居中的方法：1、對div使用絕對佈局“position:absolute;”，並設定top，left，right和bottom的值相等；2、對div使用絕對佈局，並且把top和left的值都設定為「50%」；3、透過css3的transform屬性實作div居中。
本教學操作環境：Windows10系統、CSS3版、DELL G3電腦
css怎麼設定div相對網頁置中？
css讓div居中
1.對div使用絕對佈局「position:absolute;」;
方法一：對div使用絕對佈局position:absolute;並設定top，left，right，bottom的值相等，但不一定都等於0；並且設定margin:auto
{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}2.對div使用絕對佈局並把top和left的值都設定為50%；
方法二：這個方法要知道div的寬度和高度。對div使用絕對佈局position:absolute;並把top和left的值都設定為50%；50%就是指頁面視窗的寬度和高度的50%；最後將div左移和上移，左移和上移的大小為div寬度和高度的一半
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}3.透過css3的transform屬性實作div居中。
方法三：div使用絕對定位position：absolute，並且設定left和top的值都為50%。使用css3的transform屬性。 transform：translate（-50%，-50%）
{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
-webket-transform:translate（-50%，-50%）;
-ms-transform:translate（-50%，-50%）;
-moz-transform:translate（-50%，-50%）;
}若有兩個div，裡面小的div相對於外面大的div水平垂直居中對齊，有以下幾種方法。
1.利用position和margin：auto實作。父元素設定position：relative；子元素設定position：absolute，並設定top，left，right，bottom值相等。
父元素{
position：relative；
}
子元素{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}2.使用position。父元素設定position：relative；子元素設定position：absolute。並設定top和left為50%，並設定左移和上移為子元素的大小的一半
父元素{
position：relative；
}子元素
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}使用display：flex。這種方法需要設定瀏覽器的兼容性。
{display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
margin:0 auto;
}3.使用transform：translate（）。父元素設定position：relative；子元素設定position：absolute。並設定top和left為50%。最後設定transform：translate（-50%，-50%）
父元素{
position：relative；
}子元素
{{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
}推薦學習：《css影片教學》
以上是css怎麼設定div相對網頁居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
