CSS居中一直是我想要整理記錄的,拖了好久,今天就順便整理一下css
是我目前使用最多的一種方式,flex佈局也是如今最方便的一種佈局,普遍用於pc端和移動端佈局
.container{ display: flex; align-items: center; justify-content: center; }
grid佈局是一種比flex更增強大的佈局,可是目前兼用性並很差,我使用的並很少,但也能實現居中flex
.container { display: grid; align-items: center; justify-content: center; }
傳統中比較新的方法,我用的很少,須要水平居中就加上 text-align: center;spa
.container { display: table-cell; vertical-align: middle; text-align: center; }
傳統方法,適用於絕對定位code
.container { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
利用vertical-align: middle的特性和中線對齊,用僞元素將內部撐高,須要水平居中就加上 text-align: center。orm
.container { width: 200px; height: 200px; border: 1px solid red; text-align: center; } .container::before { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
若是不加固定高度使用padding讓上下padding相等就能夠實現垂直居中了,須要水平居中就加上 text-align: center,適用於一些較簡單的場景get
.container { padding: 10px 40px; text-align: center; }
若是須要固定高度,而後實現垂直居中,能夠將高度設置成行高。一樣,須要水平居中就加上 text-align: center;同步
.container{ line-height: 50px; text-align:center; height: 50px; }
塊級元素,設置固定寬度,左右margin等於auto博客
div{ width: 200px; margin: 0 auto; }
對塊級的父級使用,能讓內部的匿名行盒(文字)、行內元素(span)、inline-block元素在父親裏水平居中it
.container{ text-align: center; }
個人博客即將同步至騰訊雲+社區,邀請你們一同入駐:https://cloud.tencent.com/dev...