table元素自帶垂直居中
<table class="parent">
<tr>
<td class="child"> table自帶垂直功能 </td>
<td class="child"> table自帶垂直功能 </td>
</tr>
</table>
.parent {
border: 1px solid red;
padding: 10px;
}
.child {
border: 1px solid green;
padding: 10px;
}
示例代碼 - table
行內元素垂直居中
單行行內元素
通過設定行內元素的高度(height)等于行高(line-height)，從而使元素垂直居中，
<div>
<span>單行行內元素垂直居中</span>
</div>
div {
height: 100px;
border: 1px solid red;
}
span {
border: 1px solid green;
line-height: 100px;
}
示例代碼 - 單行行內元素
多行行內元素
利用表布局
<div class="parent">
<span class="child">
行內元素是在表格里面，這時可以利用inline元素的CSS屬性vertical-align，默認是baseline屬性，將其設定為middle
</span>
</div>
.parent {
border: 1px solid red;
height: 200px;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
示例代碼 - 表布局
利用flex布局
利用flex布局實作垂直居中，將主軸方向定義為縱向，然后使用justify-content將其居中，因為flex布局是CSS3中定義，較老的瀏覽器存在兼容性問題，塊級元素也可使用flex布局實作居中，
<div class="parent">
<span>
利用flex布局實作垂直居中，其中flex-direction: column定義主軸方向為縱向，因為flex布局是CSS3中定義，較老的瀏覽器存在兼容性問題，
</span>
</div>
.parent {
border: 1px solid red;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
示例代碼 - flex布局
添加偽元素
先給子元素設定為行內塊級元素，并設定vertical-align，然后再給父元素添加100%高度的偽元素before或after，讓文本和偽元素垂直對齊，從而達到垂直居中的目的，
<div class="parent">
<span class="child">
給父元素添加100%高度的偽元素before、after，讓文本和偽元素垂直對齊，從而達到垂直居中的目的
</span>
</div>
.parent {
border: 1px solid red;
height: 200px;
text-align: center;
}
.child {
border: 1px solid blue;
display: inline-block;
width: 300px;
height: 100px;
vertical-align: middle;
}
.parent::before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
示例代碼 - 添加偽元素
塊級元素垂直居中
定高
絕對定位 + margin-top
如果我們知道居中元素的高度和寬度,可以通過絕對定位元素距離頂部50%，并設定margin-top向上偏移元素高度的一半，就可以實作垂直居中了，
<div class="parent">
<div class="child">
固定高度的塊級元素; 如果我們知道居中元素的高度和寬度, 可以通過絕對定位元素距離頂部50%，并設定margin-top向上偏移元素高度的一半，就可以實作垂直居中了，
</div>
</div>
.parent {
border: 1px solid red;
position: relative;
height: 300px;
}
.child {
border: 1px solid red;
position: absolute;
height:200px;
top: 50%;
margin-top: -100px;
}
示例代碼 - margin-top
絕對定位 + margin:auto;
在子元素上設定position: absolute;、margin: auto;，然后分別給top、bottom、left、right都設定為0即可，
<div class="parent">
<div class="child">
子元素設定absolute，margin:auto，top、bottom、left、right為0
</div>
</div>
.parent {
border: 1px solid red;
height: 200px;
position: relative;
}
.child {
border: 1px solid green;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
示例代碼 - margin:auto;
不定高
transform屬性
當垂直居中的元素的高度和寬度未知時，我們可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實作垂直居中，但是部分瀏覽器存在兼容性的問題，
<div class="parent">
<div class="child">
未知高度的塊級元素;當垂直居中的元素的高度和寬度未知時，我們可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實作垂直居中，但是部分瀏覽器存在兼容性的問題，
</div>
</div>
.parent {
border: 1px solid red;
position: relative;
height: 200px;
}
.child {
border: 1px solid blue;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
示例代碼 - transform
使用假表格
將父元素display設定為table-cell，然后利用vertical-align實作垂直居中，
<div class="parent">
<div class="child">
利用假表格來實作，在父元素設定vertical-align: middle; display: table-cell;即可</div>
</div>
.parent {
border: 1px solid red;
width: 250px;
height: 200px;
vertical-align: middle;
display: table-cell;
}
.child {
border: 1px solid green;
}
示例代碼 - 假表格
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7074.html
標籤：Html/Css