最简单的方法是以下三行CSS：

1） 位置：相对；

2） 顶部：50%；

3） 变换：translateY（-50%）；

以下是一个示例：

外部配电盘{高度：170px；宽度：300px；背景色：浅灰色；}中间分隔符{位置：相对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；}<div class='outer-div'><div class='middle-div'>测试文本</div></div>

居中是CSS最困难的方面之一。

这些方法本身通常不难理解。相反，这更多是因为有很多方法可以将事情集中起来。

您使用的方法可能会有所不同，这取决于您试图居中的HTML元素，或者是水平居中还是垂直居中。

水平居中

水平对中元件通常比垂直对中元件更容易。下面是一些常见的元素，您可能希望水平居中，以及不同的方法。

使用CSS文本居中属性居中文本

要使文本或链接水平居中，只需使用文本对齐属性和值中心：

HTML

<div class="container">
  <p>Hello, (centered) World!</p>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Center horizontally*/
  text-align: center;
}

使用CSS边距自动居中分隔

使用值为0的速记边距属性，自动将块级元素（如div）水平居中：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center horizontally*/
  margin: 0 auto;
}

使用Flexbox水平居中跳水

Flexbox是在页面上居中的最现代的方式，它使设计响应式布局比以前容易得多。然而，它在一些传统浏览器（如Internet Explorer）中并不完全受支持。

要使用Flexbox水平居中元素，只需将display：flex和justify content：center应用于父元素：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Center child horizontally*/
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

垂直居中

如果没有像Flexbox这样的现代方法，将元素垂直居中可能是一件很麻烦的事。在这里，我们将介绍一些较旧的方法，首先垂直居中，然后向您展示如何使用Flexbox实现这一点。

如何使用CSS绝对定位和负边距使Div垂直居中

在很长一段时间里，这是垂直居中的常用方法。对于此方法，必须知道要居中的元素的高度。

首先，将父元素的position属性设置为relative。

然后，对于子元素，将position属性设置为absolute，并将top设置为50%：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
}

但这实际上只是将子元素的顶部边缘垂直居中。

要使子元素真正居中，请将margin-top属性设置为-（子元素高度的一半）：

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* Half this element's height */
}

使用变换和平移使Div垂直居中

如果您不知道要居中的元素的高度（或者即使您知道），这个方法是一个很好的技巧。

该方法与上述负边距方法非常相似。将父元素的位置属性设置为相对。

对于子元素，将position属性设置为absolute，并将top设置为50%。现在，不要使用负边距来真正居中子元素，只需使用transform:translate（0，-50%）：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

请注意，translate（0，-50%）是translateX（0）和translateY（-50%）的简写。您还可以编写transform:translateY（-50%）以垂直居中子元素。

垂直和水平居中

使用CSS绝对定位和负边距使Div垂直和水平居中

这与上述垂直居中元素的方法非常相似。和上次一样，您必须知道要居中的元素的宽度和高度。

将父元素的位置属性设置为相对。

然后将孩子的位置属性设置为绝对，顶部设置为50%，左侧设置为50%。这只会使子元素的左上角垂直和水平居中。

要使子元素真正居中，请将负上边距设置为子元素高度的一半，将负左边距设置为子元素宽度的一半：

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* Apply negative top and left margins to truly center the element */
}

经过大量研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

可以通过两种方式实现

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

OR

使用flex

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

对齐项目：居中；使内容垂直居中

对齐内容：中心；使内容水平居中

最好的做法是：

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150像素，因为在本例中，这是div高度的一半。

这个解决方案适用于块元素（例如，＜div＞）。我用颜色使溶液更清晰。

HTML格式：

<main class="skin_orange">
    <p>As you can the the element/box is vertically centered</p>
    <div class="bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

JSFiddle代码演示