2024年5月11日发(作者：)
div内容垂直居中的方法
随着div的普及使用，居中的特技也在使用越来越多。在前端
开发中，实现div内容垂直居中有以下几种方法：
一、使用CSS table布局
CSS table布局是使用table元素的display属性来模拟table
布局，利用table-cell来居中特定元素。使用display：table;和
display：table-cell;属性，我们可以让内容垂直居中，具体实现
如下：
html：
```
content
```
css：
```
.wrap{
display: table;
width: 100%;
height: 100px;
- 1 -
}
.inner-box{
display: table-cell;
vertical-align: middle;
}
```
这种方式的优点是兼容性比较好，能在IE 8及以上的浏览器使
用；但是缺点也很明显，就是有点麻烦，要配合HTML元素以及CSS
样式才能实现内容垂直居中，无形中多做了更多的工作。
二、使用flex布局
flex是最近几年出现的一种布局，它能很方便的实现div内容
的垂直居中，具体实现如下：
html：
```
content
```
css：
```
- 2 -
.flex-wrap {
display: flex;
align-items: center;
height: 100px;
}
```
使用flex布局居中的最大优点在于实现更加方便，只需要两行
CSS代码即可实现div内容的垂直居中，兼容性也不错，可以在IE
10以及以上的浏览器使用。
三、使用CSS3 transform：translateX属性
CSS3 transform提供了许多属性，其中有一个叫translateX,
通过translateX可以实现水平移动，进而实现内容的垂直居中，具
体实现如下：
html：
```
content
```
css：
- 3 -
```
.translate-wrap {
position: relative;
width: 100%;
height: 100px;
}
.translate-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
```
通过设置父元素与子元素的定位，进而让子元素的水平位置居
中，并且再设置子元素的translateX(-50%)来实现内容的垂直居
中。这种方式的优点是让内容垂直居中只需要使用一行CSS代码，
非常方便；缺点在于兼容性不太好，只能在IE 9以及以上的浏览器
使用。
以上就是实现div内容垂直居中的几种不同方法介绍，从使用
方便、性能以及兼容性上来看，使用flex布局是最佳选择，无论是
PC端还是移动端都可以使用；而CSS 3 transform：translateX则
只能用在移动端，在PC端不能使用，并且兼容性也非常差；CSS
- 4 -
table则是一种比较麻烦的方法，需要配合HTML元素以及CSS样式
来实现内容的垂直居中，但是可以实现兼容性最好的效果。
总而言之，实现div内容垂直居中有多种方法，需要实际应用
情况来决定选择哪种方法，只要选择最接近的方法，就可以实现完
美的div内容垂直居中。
- 5 -
发布评论