我将 div 设置为 display:block（90px height 和 width），并且里面有一些文本。
我需要文本在垂直和水平方向居中对齐。
我试过text-align:center，但是它没有做垂直居中部分，所以我试了vertical-align:middle，但是没有用。
有任何想法吗？
【问题讨论】：
如果它是一行文本和/或图像，那么很容易做到。只需使用：
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
而已。如果可以是多行，那就稍微复杂一些。但是http://pmob.co.uk/上有解决办法。寻找“垂直对齐”。
因为它们往往是 hack 或添加复杂的 div...我通常使用带有单个单元格的表来完成...以使其尽可能简单。
除非你需要让它在早期的浏览器（如 Internet Explorer 10）上工作，否则你可以使用 flexbox。它是widely supported by all current major browsers。基本上，需要将容器指定为弹性容器，并沿其主轴和横轴居中：
#container {
display: flex;
justify-content: center;
align-items: center;
}
为孩子指定固定宽度，称为“弹性项目”：
#content {
flex: 0 0 120px;
}
示例：http://jsfiddle.net/2woqsef1/1/
要对内容进行收缩包装，更简单：只需从 flex 项目中删除 flex: ... 行，它就会自动收缩包装。
示例：http://jsfiddle.net/2woqsef1/2/
上面的示例已经在包括 MS Edge 和 Internet Explorer 11 在内的主要浏览器上进行了测试。
一个技术说明，如果你需要自定义它：在 flex 项目内部，因为这个 flex 项目本身不是 flex 容器，旧的非 flexbox CSS 方式按预期工作。但是，如果你向当前的弹性容器中添加一个额外的弹性项目，这两个弹性项目将被水平放置。要使它们垂直放置，请将 flex-direction: column; 添加到 flex 容器中。这就是它在 flex 容器和它的容器之间的工作方式即时子元素。
有另一种居中方法：不指定center作为弹性容器在主轴和交叉轴上的分布，而是在弹性项目上指定margin: auto以占据所有四个方向的所有额外空间，均匀分布的边距将使弹性项目在各个方向居中。除非有多个弹性项目，否则此方法有效。此外，此技术适用于 MS Edge，但不适用于 Internet Explorer 11。
它可以更常见地使用 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 就可以完成这项工作。
【讨论】：
display: table-cell 属性，仅供参考。使用它使元素表现得像一个表格单元格，并允许vertical-align: middle;
font: 与这些一起使用，请确保将其放在 line-height 之前。
transformtranslateX/translateY：Example Here / Full Screen Example
在supported browsers（大多数）中，您可以结合使用top: 50%/left: 50%和translateX(-50%) translateY(-50%)来动态垂直/水平居中元素。
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Example Here / Full Screen Example
在supported browsers中，将目标元素的display设置为flex，并使用align-items: center进行垂直居中，使用justify-content: center进行水平居中。只是不要忘记添加供应商前缀以获得额外的浏览器支持 (see example)。
html, body, .container {
height: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
table-cell/vertical-align: middle：Example Here / Full Screen Example
在某些情况下，您需要确保将 html/body 元素的高度设置为 100%。
对于垂直对齐，将父元素的width/height设置为100%并添加display: table。然后对于子元素，将display更改为table-cell并添加vertical-align: middle。
对于水平居中，您可以添加 text-align: center 来居中文本和任何其他 inline 子元素。或者，您可以使用 margin: 0 auto 假设元素是 block 级别。
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
50% 位移：Example Here / Full Screen Example
此方法假定文本具有已知高度 - 在本例中为 18px。只需相对于父元素从顶部绝对定位元素50%。使用负值margin-top，即元素已知高度的一半，在本例中为 - -9px。
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
line-height 方法（最不灵活 - 不建议）：在某些情况下，父元素将具有固定高度。对于垂直居中，您所要做的就是在子元素上设置一个等于父元素固定高度的line-height值。
尽管此解决方案在某些情况下会起作用，但值得注意的是，当有多行文本时它不会起作用 - like this。
.parent {
height: 200px;
width: 400px;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
方法 4 和 5 不是最可靠的。选择前 3 个中的一个。
【讨论】：
使用 flexbox/CSS：
<div class="box">
<p>അ</p>
</div>
CSS：
.box{
display: flex;
justify-content: center;
align-items: center;
}
取自Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally
【讨论】：
display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center。
inline- 元素添加 text-align:center .. 例如文本。
将 display: 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
}
【讨论】：
position 是绝对的或固定的，这将不起作用。见：jsfiddle.net/tH2cc/1636
将此 CSS 类赋予目标 <div>：
.centered {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: red; /* Not necessary just to see the result clearly */
}<div class="centered">This text is centered horizontally and vertically</div>【讨论】：
您可以为此尝试非常简单的代码：
display: flex;
align-items: center;
justify-content: center;
.box{
height: 90px;
width: 90px;
background: green;
display: flex;
align-items: center;
justify-content: center;
}<div class="box">
Lorem
</div>【讨论】：
我总是将以下 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/
【讨论】：
2020年之路
.parent{
display: grid;
place-items: center;
}
【讨论】：
您可以使用 flex 属性父母div 并将 margin:auto 属性添加到子项：
.parent {
display: flex;
/* You can change this to `row` if you want the items side by side instead of stacked */
flex-direction: column;
}
/* Change the `p` tag to what your items child items are */
.parent p {
margin: auto;
}
您可以在此处查看flex的更多选项：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
【讨论】：
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello, World!!
</div>div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>【讨论】：
在父div中添加如下代码
display: grid;
place-items: center;
【讨论】：
# Parent
{
display:table;
}
# Child
{
display: table-cell;
width: 100%; // As large as its parent to center the text horizontally
text-align: center;
vertical-align: middle; // Vertically align this element on its parent
}
【讨论】：
<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>
【讨论】：
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello, World!!
</div>【讨论】：
.center {
display: grid;
justify-items: center;
align-items: center;
}
.center {
display: grid;
justify-items: center;
align-items: center;
}
.box {
width: 200px;
height: 100px;
background: red;
}<div class="box center">My text</div>【讨论】：
调整行高以获得垂直对齐。
line-height: 90px;
【讨论】：
.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}<div class="cell-row">
<div class="cell cell-middle">Center</div>
</div>【讨论】：
这对我有用（测试成功！）：
HTML:
<div class="mydiv">
<p>Item to be centered!</p>
</div>
CSS：
.mydiv {
height: 100%; /* Or other */
position: relative;
}
.mydiv p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%); /* To compensate own width and height */
}
您可以选择 50% 以外的其他值。例如，25% 以父级的 25% 为中心。
【讨论】：
您可以尝试以下方法：
如果你只有一个词或一行句子，那么下面的代码就可以做到这一点。
在 div 标签内放置一个文本并为其指定一个 id。为该 ID 定义以下属性。
id-name {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed red;
}
笔记：确保 line-height 属性与分区的高度相同。
但是，如果内容不止一个单词或一行，那么这将不起作用。此外，有时您无法以 px 或 % 指定分度的大小（当分度非常小并且您希望内容恰好位于中间时）。
为了解决这个问题，我们可以尝试以下属性组合。
id-name {
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed red;
}
这 3 行代码将内容准确地设置在一个分区的中间（不考虑显示器的大小）。这“对齐项目：中心”有助于垂直居中，同时“证明内容：居中”将使它水平居中。
笔记：Flex 并不适用于所有浏览器。确保添加适当的供应商前缀以获得额外的浏览器支持。
【讨论】：
<!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>
【讨论】：
对我来说，这是最好的解决方案：
HTML:
<div id="outer">
<img src="logo.png">
</div>
CSS：
#outer {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
【讨论】：
应用样式：
position: absolute;
top: 50%;
left: 0;
right: 0;
无论其长度如何，您的文本都将居中。
【讨论】：
这对我有用：
.center-stuff{
text-align: center;
vertical-align: middle;
line-height: 230px; /* This should be the div height */
}
【讨论】：
这应该是正确答案。最干净和最简单的：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
【讨论】：
transform: translateY(-50%); 会发生什么
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style ="text-align: center;">Center horizontal text</div>
<div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
</body>
</html>
【讨论】：
试试下面的例子。我为每个类别添加了示例：水平和垂直
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal
{
text-align: center;
}
#vertical
{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div id ="horizontal">Center horizontal text</div>
<div id ="vertical">Center vertical text</div>
</body>
</html>
【讨论】：