现在，Flexbox解决方案是现代浏览器的一种非常简单的方式，因此我向您推荐：

.容器{显示：柔性；对齐项目：居中；对齐内容：中心；高度：100%；背景：绿色；}身体html格式{高度：100%；}<div class=“container”><div>div垂直对齐</div></div>

通过使用transform属性，我们可以轻松地进行垂直居中的div。

.main分区{背景：无重复滚动0 0#999；字体大小：18px；高度：450px；最大宽度：850px；填充：15px；}.垂直中心{背景：无重复滚动0 0#1FA67A；颜色：#FFFFFF；填充：15px；位置：相对；顶部：50%；变换：translateY（-50%）；-moz变换：translateY（-50%）；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；-o变换：translateY（-50%）；}<div class=“main div”><div class=“垂直中心”><span>“Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incident ut labour et dolore magna aliqua。ut enim ad minim veniam，quis nostrud exerciation ullamco labours nisi ut aliquip ex a commo consequat。Duis aute irure dolor in representate velit esse cillum dolore eu fugiat nula pariator。例外情况下，在非政府组织的支持下，必须承担责任。”我正式任命了一位不称职的莫利特。“”</span></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 */
}

声明此Mixin：

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在元素中：

.element{
    @include vertical-align();
}

要使div在页面上居中，请选中fiddle链接。

#甚高频{边距：自动；位置：绝对；顶部：0；左：0；底部：0；右：0；}.box格式{边框半径：15px；方框阴影：0 0 8px rgba（0，0，0、0.4）；填充：25px；宽度：100px；高度：100px；背景：白色；}<div id=“vh”class=“box”>div垂直对齐</div>

另一种选择是使用flex框，选中fiddle链接。

.vh文件{背景色：#ddd；高度：400px；对齐项目：居中；显示：柔性；}.vh>div{宽度：100%；文本对齐：居中；垂直对齐：中间；}<div class=“vh”><div>div垂直对齐</div></div>

另一种选择是使用CSS 3转换：

#甚高频{位置：绝对；顶部：50%；左：50%；/*变换：translateX（-50%）translateY（-50%）*/转换：转换（-50%，-50%）；}.box格式{边框半径：15px；方框阴影：0 0 8px rgba（0，0，0、0.4）；填充：25px；宽度：100px；高度：100px；背景：白色；}<div id=“vh”class=“box”>div垂直对齐</div>

实现这一点有多种方法。

使用CSS的flex属性。

解决方案#1.父级{宽度：400px；高度：200px；背景：蓝色；显示：柔性；对齐项目：居中；对齐内容：中心；}.儿童{宽度：75px；高度：75px；背景：黄色；}<div class=“parent”><div class=“child”></div></div>

或使用display：flex；边距：自动；

解决方案#2.父级{宽度：400px；高度：200px；背景：蓝色；显示：柔性；}.儿童{宽度：75px；高度：75px；背景：黄色；边距：自动；}<div class=“parent”><div class=“child”></div></div>

显示文本中心

解决方案#3.父级{宽度：400px；高度：200px；背景：黄色；显示：柔性；对齐项目：居中；对齐内容：中心；}<div class=“parent”>中心</div>

使用百分比（%）高度和宽度。

解决方案#4.父级{位置：绝对；高度：100%；宽度：100%；背景：蓝色；显示：柔性；对齐项目：居中；对齐内容：中心；}.儿童{宽度：75px；高度：75px；背景：黄色；}<div class=“parent”><div class=“child”></div></div>