本來想把這個知識點放在這篇部落格中講的,但是這裡涉及的內容還挺多的。於是就把它單獨拉出來寫了。
下面的內容使用到了flex的布局方式。有關flex的詳細使用方法和相容性。這裡就不詳細講述了，可以看這篇文章
這裡討論的是子元素為塊級元素的水平垂直居中方案。其他行內元素的的方案可以看這大佬的文章16種方法實現水平居中垂直居中
html:
"parent">
"child">
複製**
.parent
.child
複製**
css:
.parent
.child
複製**
css:
.parent
.child
.method3
複製**
css:
.parent
.child
複製**
詳細**在這裡：github.com/leo928/html…
參考資料
【前端攻略】最全面的水平垂直居中方案與flexbox布局
小tip: margin:auto實現絕對定位元素的水平垂直居中
移動端水平垂直居中 盒子垂直水平居中方案
盒子垂直水平居中的需求在專案中可以說是非常常見的，我在開發過程中常用的以下幾種方法 首先，做一下基礎的布局 定位利用絕對定位使得盒子在父容器中水平垂直居中，是簡單有效的方法，在實際開發中用的很多 container box 但是這種方法在子元素寬高不確定的情況下就不適用了。由於 css3 的出現，有...
css水平垂直居中多種方法
結構 parent childblock 塊級元素 inline 內聯元素 text align有效 width,height無效 文字稱開 inline block 行內塊級元素 塊 內 注意 width,height有效 結構 child會導致脫離文件流 浮動float，設定絕對定位，固定定位 ...
CSS 水平居中和垂直居中的多種實現方法
後面的所有例子，都分為 3 層巢狀 父元素，子元素，內容。其中父子元素都是塊級元素 div。父元素設定屬性display flex justify content center align items center 父元素設定屬性display flex 子元素設定屬性margin auto 父元素...