admin 管理员组文章数量: 1087139
2024年2月23日发(作者：python隐藏进程)
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 -
版权声明：本文标题：div内容垂直居中的方法 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1708637803a528396.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论