當不知道子元素的寬和高的時候,如何實現子元素的水平垂直居中,這裏總結了幾種方法:
1、利用定位和transform實現
HTML和CSS代碼如下:
<div class="super-div">
<div class="sub-div">利用定位和transform
<br/>實現水平垂直居中</div>
</div>
.super-div {
width: 400px;
height: 300px;
border: 1px solid black;
}
.sub-div {
background-color: green;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* top left 分別相對於父元素的高度和寬度,translate相對於自身的寬度和高度 */
}
這種實現方式的核心在於註釋部分,相對定位的時候,top和left都是相對於父元素的高度和寬度計算,而transform是相對與自身寬高計算; 效果如下:
2、利用table-cell佈局實現
HTML和CSS代碼實現如下:
<div class="super-div table">
<div class="table-cell">利用table-cell
<br/>實現水平垂直居中</div>
</div>
.super-div {
width: 400px;
height: 300px;
border: 1px solid black;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
/*垂直居中*/
vertical-align: middle;
/*水平居中*/
text-align: center;
background-color: green;
}
父元素設置table佈局,子元素設置爲table-cell佈局。然後實現子元素的垂直水平居中,效果如下:
3、利用flex佈局實現
HTML和CSS代碼如下:
<div class="super-div flex">
<div class="flex-center">利用flex佈局
<br/>實現水平垂直居中</div>
</div>
.super-div {
width: 400px;
height: 300px;
border: 1px solid black;
}
.flex {
display: flex;
/*flex佈局*/
justify-content: center;
/*使子項目水平居中*/
align-items: center;
/*使子項目垂直居中*/
}
.flex-center {
background-color: green;
}
實現效果如下: