讓浮層水平垂直居中的方法
阿新 • • 發佈：2018-12-31
（一）利用絕對定位與transform
<div class="parent">
<div class="children"></div>
</div>
將父元素定位，子元素如下
.children{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:translate(-50%,-50%);
background: black;
}
（二）利用flexbox
.parent{
justify-content:center;
align-items:center;
display: -webkit-flex;
}
（三）當子元素的寬高固定，父元素內含有除居中元素外其它元素（空標籤也行）或者父元素的高度不為0時
將父元素定位，子元素絕對定位，利用margin負值為子元素寬高的一半來實現。
程式碼如下：
<div class="parent">
<div class="children"></div>
<span></span>
</div>
.parent{
height:400px;//有除對定位元素外其它元素時可不設，若沒有則需要position: relative;
background: red;
}
.children{
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
background: black;
position: absolute;
top: 50%;
left:50%;
}
（四）利用table
（五）display:table-cell
CSS中有一個用於豎直居中的屬性vertical-align，但只有 當父元素為td或者th時，這個vertical-align屬性才會生效，對於其他塊級元素，例如 div、p等，預設情況下是不支援vertical-align屬性的，可以設定塊級元素的display型別為table-cell，啟用vertical-align屬性，但display:table-cell存在相容性問題，所以這種方法沒辦法跨瀏覽器相容。
<div class="parent">
<div class="child">哈哈</div>
</div>
.parent{
width: 400px;
height: 100px;
background: black;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
background: red;
display: inline-block;
}
（六）利用定位與margin：auto
<div class="parent"><div class="child">哈哈</div>
</div> .parent{ width: 600px;
height: 400px;
background: red;
position: relative;
}
.children{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: black;
} 該文章為個人的一些學習與總結，如果有不多的地方，望指正~~~