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中文網其他相關文章!