未知高度和宽度元素的水平垂直居中（不外传秘法）-唯品秀前端博客

未知高度和宽度元素的水平垂直居中（不外传秘法）

2017-05-18 分类：HTML/CSS 作者：管理员阅读（16659）

在说到这个问题的时候，我们都知道，table默认文字就是垂直居中显示的，也许有人会问Div中CSS中不是有text-align属性来设置垂直居中的吗？是的，通常我们使文字垂直居中用的就是这个属性，但是在正式开发时候单单掌握这个可不够，例如：现在有一需求，在div中（未知宽高），里面内容不固定，不管是文字占1行还是多行都在div中垂直居中，那么应该怎么做？

当要被居中的元素是inline（例如span）或者inline-block（例如div/p）的时候，可以巧妙的将父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/199<img src=" http://www.weipxiu.com/wp-content/uploads/2017/05/G5UC9DYR54DWIX7RLE.png " alt=" " width="1052 " height="198 " class="alignnone size-full wp-image-679 " />
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type " content="text/html; charset=utf-8 " />
<style type="text/css">
body {
font-size:12px;
font-family:tahoma;
}
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
div#content p {
text-align:center;
}
</style>
</head>
<body>
<div id="wrap ">
<div id="content ">
<p>现在我们要使这段文字垂直居中显示</p>
<p>现在我们要使这段文字垂直居中显示</p>
<p>现在我们要使这段文字垂直居中显示</p>
</div>
</div>
</body>
</html>

工作需求示例展示：