項目中經(jīng)常會有各種居中的布局，什么垂直居中，水平居中，垂直水平居中，已知寬高和未知寬高居中，那么接下來就整體的總結(jié)一下，方便以后使用，也在此記錄一下。

一、行內(nèi)文字、鏈接水平居中

這個相對簡單，行內(nèi)元素直接加上 text-align:center; 即可

二、單個塊兒元素水平居中

將該元素加上 margin:0 auto; 即可

三、多個塊兒元素水平居中，將父級設置?text-align:center; 子元素設置?display: inline-block;?

四、單行內(nèi)元素垂直居中

將 line-height 與?height 設置為同一值，即行高與父元素高度相同

五、多行內(nèi)元素垂直居中

模擬表格單元,然后用 vertical-align 進行控制位置，父級元素設置

????????display: table-cell;

? ? ? ? vertical-align: middle;

六、塊兒元素垂直居中

使用絕對定位?position: absolute; 定位50%，然后在 margin-top 拉回居中元素的高度一半

????????width:100px;

? ? ? ? height:100px;

? ? ? ? background:rgb(20,77,221);

? ? ? ? position: absolute;

? ? ? ? top:50%;

? ? ? ? margin-top:-50px;

七、已知寬高元素垂直居中

大體和上一個方法一樣，使用絕對定位position: absolute;?左、上定位50%，然后在?margin-top margin-left?拉回居中元素的高度一半

?? ? ? ?width:100px;

? ? ? ? height:100px;

? ? ? ? background:rgb(20,77,221);

? ? ? ? position: absolute;

? ? ? ? top:50%;

? ??????left:50%;

? ? ? ? margin-top:-50px;

? ? ? ? margin-left:-50px;

八、未知寬高元素水平垂直居中

? ? ? ? 父級元素要設置?position:relative

? ??????position: absolute;?

? ? ? ? left:50%;

? ? ? ? transform:translate(-50%, -50%);

九、flex布局 實現(xiàn)居中

? ? ? ? 父級元素????display: flex;

? ? ? ? ? ? ? ? ? ? ? ? ? ?height:500px;

? ? ? ? ? ? ? ? ? ? ? ? ? ?background:#03A1FA;

? ? ? ? 子級元素????width:100px;

? ? ? ? ? ? ? ? ? ? ? ? ? ?height:100px;

? ? ? ? ? ? ? ? ? ? ? ? ? ?margin: auto;

? ? ? ? ? ? ? ? ? ? ? ? ? ?background:#BB3713;