本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。

水平居中

• 行内元素

这种情况最简单，只需要将行内元素包括在一个display属性为block的父元素中，并且设置父元素text-align为居中即可

.border {
  width: 400px;
  line-height: 100px;
  border: 1px solid red;
  text-align: center;
}

<div class="border">
      <span>行内元素</span>
</div>

• 块状元素

对块状元素设置相应的外边距即可，外边距左、右设置为auto。

.parent {
  width: 400px;
  height: 100px;
  border: 1px solid red;
}
.block-child {
  width: 100px;
  border: 2px solid black;
  margin: 10px auto;
  text-align: center;
}

<div class="parent">
      <div class="block-child">块状元素</div>
</div>

• 多个块状元素①

传统方法，在父元素设置text-align:center; 然后将需要居中的块状元素的display设置为inline-block

.border {
  width: 400px;
  line-height: 100px;
  border: 1px solid red;
  text-align: center;
}
.inline-block {
  display: inline-block;
  border: 1px solid black;
}

 <div class="border">
      <div class="inline-block">块状元素1</div>
      <div class="inline-block">块状元素2</div>
      <div class="inline-block">块状元素3</div>
  </div>

• 多个块状元素②

使用flex布局实现，将父元素display设置为flex，同时设置子元素对齐。

.parent-flex {
  width: 400px;
  border: 1px solid red;
  display: flex;
  justify-content: center;
}

<div class="parent-flex">
      <div style="border: 1px solid black;">块状元素1</div>
      <div style="border: 1px solid black;">块状元素2</div>
      <div style="border: 1px solid black;">块状元素3</div>
</div>

垂直居中

• 单行行内元素

将行内元素的 line-height 属性与其父元素的 height 属性设置为相同值，比如都是40px。

• 多行的行内元素

通过设置父元素display属性为table-cell，及其他相关属性解决。

.parent-table-cell {
  width: 400px;
  height: 100px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
}

<div class="parent-table-cell">
      <span>行内元素1</span><br>
      <span>行内元素2</span><br>
      <span>行内元素3</span>
</div>

• 已知高度的块状元素

结合元素的position及margin属性，通过定位设置居中，父元素position设置为relative。

.item{
  top: 50%; // 顶部位置位于父元素的50%处
  margin-top: -50px;  // margin-top 值为自身高度的一半
  position: absolute; //position也可以是
}

注意：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持display属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

喜欢就关注支持一下吧。