將一個塊級元素水平居中有幾種方法?分別是什么?


水平居中:利用選擇器選擇到該元素,

     1.添加屬性 margin:auto;

     2.設置父元素相對定位,子元素position: absolute;left:50% ;同時margin-left值為-(子元素寬度的一半),因為設置top值時是相對於盒子左部,所以想要居中還要往上移動半個盒子的寬度度才能實現;

     3.父級元素添加display:flex;justify-contet:center;

垂直居中:1.父級元素添加display:flex; aiign-items:center;

     2.設置父元素相對定位,子元素position: absolute;top: 50%;同時margin-top值為-(子元素高度的一半),因為設置top值時是相對於盒子頂部,所以想要居中還要往上移動半個盒子的高度才能實現。

     3.這種方法和第一種差不多,在父容器中設置display:flex;子元素設置align-self: center;

     4.在父容器中再加上一個子元素,把它的高度設為去掉盒子高度后的一半,實際上就是設置了一個隱藏塊元素,把實際上顯示的塊元素“擠”到垂直居中的位置;

     5. 設置父元素為相對定位,子元素為絕對定位,同時設置子元素的top,bottom,left,right值為0,最后設置margin:auto;這能實現塊元素的垂直+水平居中

     6. 設置父容器為display: table-cell;vertical-align: middle;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM