你可以在父div中使用flex属性，并将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/

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

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

您可以尝试以下方法:

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.

对我来说，这是最好的解决方案:

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%);
}

方法1

div { 身高:90 px; 行高:90 px; text-align:中心; 边界:2px虚线#f69c55; ｝ < div > 你好,世界! ! < / div >

方法2

div { 身高:200 px; 行高:200 px; text-align:中心; 边界:2px虚线#f69c55; ｝ 跨度{ 显示:inline-block; vertical-align:中间; 行高:正常; ｝ < div > <span>我与你同在，我与你同在。对我说，对我说，对我说。非enim iam stirpis bonum quaeret, sed animalis。< / span > < / div >

方法3

div { 显示:表; 身高:100 px; 宽度:100%; text-align:中心; 边界:2px虚线#f69c55; ｝ 跨度{ 显示:表格单元; vertical-align:中间; ｝ < div > <span>神圣的神圣，神圣的神圣。</span> < / div >

截至2014年的常见技术:

方法1 -转换translateX/translateY: 这里/全屏示例 在受支持的浏览器中(大多数)，您可以使用top: 50%/left: 50%结合translateX(-50%) translateY(-50%)动态地将元素垂直/水平居中。 .container { 位置:绝对的; 上图:50%; 左:50%; translateX(-50%) translateY(-50%); ｝

方法2 - Flexbox方法: 这里/全屏示例 在受支持的浏览器中，将目标元素的显示设置为flex，并使用align-items: center用于垂直居中，使用justify-content: center用于水平居中。不要忘记为额外的浏览器支持添加供应商前缀(参见示例)。 Html, body， .container { 高度:100%; ｝ .container { 显示:flex; 对齐项目:中心; justify-content:中心; ｝

Approach 3 - table-cell/vertical-align: middle: Example Here / Full Screen Example In some cases, you will need to ensure that the html/body element's height is set to 100%. For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle. For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block level. html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }

Approach 4 - Absolutely positioned 50% from the top with displacement: Example Here / Full Screen Example This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -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; }

Approach 5 - The line-height method (Least flexible - not suggested): Example Here In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element. Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this. .parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }

方法4和5不是最可靠的。选前三个中的一个。