我有一个div设置显示:块(90px高和宽)，我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center，但它不做垂直居中部分，所以我尝试了vertical-align:middle，但它不起作用。
什么好主意吗?
当前回答
我总是在容器中使用以下CSS，使其内容水平和垂直居中。
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
在这里查看它的实际操作:https://jsfiddle.net/yp1gusn7/
其他回答
如果它是一行文本和/或图像，那么很容易做到。只使用:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
就是这样。如果它可以是多行，那么它就有点复杂。但在http://pmob.co.uk/上有解决方案。寻找“垂直对齐”。
因为他们往往是黑客或添加复杂的div…我通常使用带有单个单元格的表格来做这件事……让它尽可能简单。
2020年更新:
除非您需要让它在早期的浏览器(如Internet Explorer 10)上工作，否则您可以使用flexbox。目前所有主要浏览器都广泛支持它。基本上，容器需要被指定为一个伸缩容器，并沿着它的主轴和十字轴对中:
#container {
display: flex;
justify-content: center;
align-items: center;
}
为子元素指定一个固定的宽度，称为“flex item”:
#content {
flex: 0 0 120px;
}
例如:http://jsfiddle.net/2woqsef1/1/
要收缩包装内容，这甚至更简单:只需删除flex:…线从伸缩项目，它是自动收缩包装。
例如:http://jsfiddle.net/2woqsef1/2/
上面的例子已经在MS Edge和Internet Explorer 11等主流浏览器上进行了测试。
如果您需要自定义它，请注意一个技术注意事项:在伸缩项内部，因为这个伸缩项本身不是一个伸缩容器，所以旧的非flexbox CSS方式可以正常工作。但是，如果向当前伸缩容器添加额外的伸缩项，则这两个伸缩项将水平放置。为了使它们垂直放置，添加flex-direction: column;到flex容器。这就是它在伸缩容器及其直接子元素之间的工作方式。
还有另一种方法:不为伸缩容器的主轴和十字轴上的分布指定中心，而是指定边距:auto在伸缩项目上占用所有四个方向上的所有额外空间，均匀分布的边距将使伸缩项目在所有方向上居中。这是有效的，除非有多个伸缩项目。此外，这种方法适用于MS Edge，但不适用于Internet Explorer 11。
2016 / 2017年更新:
更常用的方法是transform，即使在老式浏览器(如Internet Explorer 10和Internet Explorer 11)中也能很好地工作。它可以支持多行文本:
position: relative;
top: 50%;
transform: translateY(-50%);
例如:https://jsfiddle.net/wb8u02kL/1/
收缩包装宽度:
上面的解决方案使用固定宽度的内容区域。要使用收缩包装宽度，请使用
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
例如:https://jsfiddle.net/wb8u02kL/2/
如果需要Internet Explorer 10的支持，那么flexbox将不起作用，上面的方法和line-height方法将起作用。否则，flexbox将完成这项工作。
这应该是正确答案。最干净最简单:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="small-container">
<span>Text centered</span>
</div>
<style>
.small-container {
width:250px;
height:250px;
border:1px green solid;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.small-container span{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
添加行显示:table-cell;到该div的CSS内容。
只有表格单元格支持vertical-align: middle;，但是你可以把[table-cell]定义给div…
一个活生生的例子在这里:http://jsfiddle.net/tH2cc/
div{
height: 90px;
width: 90px;
text-align: center;
border: 1px solid silver;
display: table-cell; /* This says treat this element like a table cell */
vertical-align:middle; /* Now we can center vertically like in a TD */
}
<!DOCTYPE html>
<html>
<head>
<style>
.maindiv {
height: 450px;
background: #f8f8f8;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<div class="maindiv">
<h1>Title</h1>
</div>
</body>
</html>
