讓浮層水平垂直居中的方法
阿新 • • 發佈: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;
} 該文章為個人的一些學習與總結,如果有不多的地方,望指正~~~