五种实现div内容垂直居中的CSS技巧总结

更新:10-27 民间故事我要投稿纠错投诉

本篇文章给大家谈谈五种实现div内容垂直居中的CSS技巧总结，以及对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

2. 填充方法

3、模拟形式法

4.CSS3变换实现

五：CSS3的box方法实现水平、垂直居中

六：flex布局（2018/04/17补充）

七：更简单的说，解决办法就是添加

margin:（容器的行高-对象本身的高度）/2px 0;

垂直对齐：中间；

八：top:50%；

边距-top:-h/2；（缺点是只能相对于浏览器，必须使用position:absolute）

1. 线高法

如果只有一行或者几个字需要垂直居中的话，做起来是最简单的。只需使文本的行高与容器的高度相同即可，例如：

p{高度：30px;行高：30px;宽度：100px;溢出：隐藏； }

这段代码可以实现段落中文字垂直居中的效果。

2. 填充方法

另一种方法与线高法非常相似。它还适用于一行或多行文本的垂直居中。原理是利用padding使内容垂直居中，如：

p{padding:20px0; }

这段代码的效果和line-height方法类似。

3、模拟形式法

设置容器为display:table，然后设置子元素，即要垂直居中的元素为display:table-cell，然后添加vertical-align:middle来实现。

html结构如下：

测试垂直居中效果测试垂直居中效果

CSS代码：

#wrapper{display:table;width:300px;height:300px;background:#000;margin:0auto;color:red;}#cell{display:table-cell;vertical-align:middle;}

4.CSS3变换实现

CSS代码如下：

.center-vertical{position: 相对；top:50%;transform:translateY(-50%);}.center-horizontal{position: 相对；left:50%;transform:translateX(-50%); }

五：CSS3的box方法实现水平、垂直居中

html代码：

我是多行文本

CSS代码：

.center{宽度：300px;高度：200px;填充：10px;边框：1pxsolid#ccc;背景：#000;颜色：#fff;margin:20pxauto;

显示： -webkit-box;-webkit-box-orient:水平；-webkit-box-pack:中心；-webkit-box-align:中心；display: -moz-box;-moz-box-orient:水平；-moz-box-pack:中心；-moz-box-align: 中心；显示： -o-box;-o-box-orient: 水平；-o-box-pack: 中心；-o-box-align: 中心；显示： -ms-box;-ms-box -orient: 水平；-ms-box-pack: 中心；-ms-box-align: 中心；显示：框；box-orient: 水平；box-pack: 中心；box-align: 中心；}

六：flex布局（2018/04/17补充）

html代码：

我是多行文本。我是多行文本。我是多行文本。我是多行文本。

CSS代码：

.flex{/*flex布局*/display: flex;/*实现垂直居中*/align-items: center;/*实现水平居中*/justify-content: center;text-align: justify;width:200px;height:200px;background:#000;margin:0auto ;颜色：#fff;}

实现效果：