写网页时，如何让 div 中的内容垂直居中？

正2013-09-10 00:28:06版本:1/1

2013-09-10 00:28:06版本:1/1

垂直定位法 div 居中更多标签...

版权归作者所有。任何形式转载须联系作者获得授权。

作者：正解网

来源：正解网

链接：https://www.zhengjie.com/question/dbb622bd

投票8好问题烂问题修改

问题状态

正解:1个

解答:1个

同问:0人

浏览:57次

修改解答

![](/image/f2e7b8401a5baa453300401f9f9fc68e.gif)

有 4 种方法可以实现 div 中的内容垂直居中：

1、行高（line-height）法

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

这段代码可以达到让文字在段落中垂直居中的效果。

2、内边距（padding）法

另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：

p { padding:30px; }

这段代码的效果和 line-height 法差不多。

3、模拟表格法

模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示，用到的 CSS 属性有 display、vertical-align 等。 先看下面的 Html 代码：

&lt;div id="box"&gt; &lt;div id="content"&gt;居中显示&lt;/div&gt; &lt;/div&gt;

参照以上 Html 代码，让最外面名为 box 的 Div 呈表格样式显示，然后再让 box 中名为 content 的 div 呈单元格显示，并利用 vertical-align:middle 让其垂直居中，这样就模拟出来和表格一样的显示方式，CSS代码如下：

#wrap { height:400px; display:table; } #content { vertical-align:middle; display:table-cell; border:1px solid #FF0099;   background:#000;   width:400px; }

但这种方法有一个弊端，由于 IE 浏览器对高度理解会产生错误，所以这种方法仅对 Firefox 有效，对 IE 无效，既然这样，就需要找出对 IE 的修正方法，于是有了另外一种方法。

4、定位法

顾名思义，定位法是利用 CSS 定位属性 position 对元素进行定位的方法，也属于模拟方法，不过它对 IE 的支持还是不错的。 它的 HTML 代码为：

&lt;div id="box"&gt; &lt;div id="sub"&gt; &lt;div id="content"&gt;垂直居中&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

这段代码比上一种方法中多出了一个名为 sub 的 div，它的作用是用来定位，原理就是:首先让 box 出于相对定位，sub 相对 box 出于相对定位，位于 box 垂直方向的 50%，再让 content 中的真正内容出于 sub 垂直方向的 -50%，从而制作出 content 在 box 中垂直居中的效果，它们的 CSS 代码如下：

#wrap { border:1px solid #000; background:#F00; width:400px; height:400px; position:relative; } #subwrap { position:absolute; top:50%; } #content { border:1px solid #000; position:relative; top:-50%; color:#FFF; }

这段代码无论是在IE中还是 Firefox 中，都能正常居中了。

写网页时，如何让 div 中的内容垂直居中？

问题状态

相关问题

修改提问

修改解答

我的解答