讓乙個元素水平垂直居中，到底有多少種方案？

對於寬度未知的塊級元素

利用line-height實現居中，這種方法適合純文字類

通過設定父容器相對定位，子級設定絕對定位，標籤通過margin實現自適應居中

彈性布局flex:父級設定display: flex; 子級設定margin為auto實現自適應居中

父級設定相對定位，子級設定絕對定位，並且通過位移transform實現

table布局，父級通過轉換成**形式，然後子級設定vertical-align實現。（需要注意的是：vertical-align: middle使用的前提條件是內聯元素以及display值為table-cell的元素）。

讓乙個元素水平垂直居中，到底有多少種方案？

對於行內元素 給如果父級元素是塊級元素，則直接給父級元素設定text align center 如果父級不是塊級元素，則先將其父元素設定為塊級元素，再給父元素設定 text align center 對於確定寬度的塊級元素 width和margin實現。margin 0 auto 首先設定父元素為相...

如何讓乙個元素水平垂直居中？

這問題大概分為兩種型別，看要求，元素有沒有被設定寬高 1.利用絕對定位 box2.先把元素的左上角定位到 點，在向左和上移動自身寬高的一半 使用margin box3.先把元素的左上角定位到 點，在向左和上移動自身寬高的一半 使用transform平移 box4.先把元素的左上角定位到 點，在向左和...

css高階 04 如何讓乙個元素水平垂直居中？

老闆的手機收到乙個紅包，為什麼紅包沒居中？如何讓乙個子元素在父容器裡水平垂直居中？這個問題必考，在實戰開發中，也應用得非常多。你也許能順手寫出好幾種實現方法。但大部分人的寫法不夠規範，經不起千錘百鍊。換句話說 這些人也就面試的時候夸夸其談，但真的上戰場的時候，他們不敢這麼寫，也不知道怎麼寫最靠譜。這...