居中是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 */
}

下面是我可以构建的最好的全方位解决方案，以垂直和水平居中固定宽度、灵活高度的内容框。它已在Firefox、Opera、Chrome和Safari的最新版本中测试并运行。

.外部{显示：表格；位置：绝对；顶部：0；左：0；高度：100%；宽度：100%；}.中间{显示：表格单元格；垂直对齐：中间；}.内部{左边距：自动；右边距：自动；宽度：400px；/*你想要什么宽度*/}<div class=“outer”><div class=“middle”><div class=“inner”><h1>内容</h1><p>从前，一个沉闷的午夜</p＞</div></div></div>

查看动态内容的工作示例

我内置了一些动态内容来测试它的灵活性，并希望知道是否有人发现它有任何问题。它也可以很好地用于居中的覆盖——灯箱、弹出窗口等。

最好的做法是：

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

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

使用Flexbox可以轻松将内容居中。以下代码显示了容器的CSS，其中的内容需要居中：

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

我觉得这个最有用。。。它给出了最准确的“H”布局，并且非常容易理解。

这种标记的好处是您可以在一个地方定义内容大小->“PageContent”。

页面背景的颜色及其水平边距在其相应的div中定义。

<div id="PageLayoutConfiguration"
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

    <div id="PageBackground"
         style="display: table-cell; vertical-align: middle;
         background-color: purple;">

        <div id="PageHorizontalMargins"
             style="width: 100%;
             background-color: seashell;">

            <div id="PageContent"
                 style="width: 1200px; height: 620px; margin: 0 auto;
                 background-color: grey;">

                 My content goes here...

            </div>
        </div>
    </div>
</div>

这里用CSS分隔：

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
}

#PageBackground{
   display: table-cell;
   vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px;
   height: 620px;
   margin: 0 auto;
   background-color: grey;
}

实现这一点有多种方法。

使用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>