2020年的方式

.parent{ 
  display: grid;
  place-items: center;
}

将这个CSS类赋给目标<div>:

.centered { 宽度:150 px; 身高:150 px; 显示:flex; 对齐项目:中心; justify-content:中心; text-align:中心; 背景:红色;/*不需要只是为了清楚地看到结果*/ ｝ <div class="居中">这个文本水平和垂直居中</div>

添加行显示: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 */
}

使用flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

摘自《快速提示:垂直和水平居中元素的最简单方法》

您可以尝试以下方法:

If you have a single word or one line sentence, then the following code can do the trick. Have a text inside a div tag and give it an id. Define the following properties for that id. id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; } Note: Make sure the line-height property is same as the height of the division. Image But, if the content is more than one single word or a line then this doesn’t work. Also, there will be times when you cannot specify the size of a division in px or % (when the division is really small and you want the content to be exactly in the middle). To solve this issue, we can try the following combination of properties. id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; } Image These 3 lines of code sets the content exactly in the middle of a division (irrespective of the size of the display). The "align-items: center" helps in vertical centering while "justify-content: center" will make it horizontally centered. Note: Flex does not work in all browsers. Make sure you add appropriate vendor prefixes for additional browser support.

如果它是一行文本和/或图像，那么很容易做到。只使用:

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将完成这项工作。