CSS居中對齊的幾種方式

一、水平居中 1、在塊級父容器中讓行內元素或者行內塊元素居中，只需使用 text-align: center，這種方法可以讓 inline/inline-block/inline-table/inline-flex 居中。

<div class="container">
  <span class="content">水平居中</span>
</div>
.container {
  text-align: center;
}

2、margin: 0 auto 或者 margin: auto，可以讓塊級父容器中的塊級元素居中，對於行內元素，則需結合display: table使用。

<div class="container">
  <span class="content">水平居中</span>
</div>
.content {
  margin: 0 auto;
  display: table;
}

3、脫離文件流的水平居中。內部div固定寬度，設定left為50%，接著使用負邊距的方式調整，將margin-left設定為負的寬度的一半。

<div class="container">
  <div class="content">水平居中</div>
</div>
.container {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  width: 100px;
  margin-left: -50px;
}
 

也可以將 margin-left: -50px 換成 transform: translateX(-50%)，這種方式可以不用已知元素寬度。

4、彈性盒子。

<div class="container">
  <div class="content">水平居中</div>
</div>
.container {
  display: flex;
  justify-content: center;
}

或者

.container {
  display: flex;
  flex-direction: column;
}
.content {
  align-self: center;
}
 

二、垂直居中 1、行內元素的垂直居中把height和line-height的值設定成一樣的即可。

<div class="container">
  <span class="content">垂直居中</span>
</div>
.container {
  height: 100px;
  line-height: 100px;
}

2、display: table-cell，可以使高度不同的元素都垂直居中。

<div class="container">
  <div class="content">垂直居中</div>
</div>
.container {
  display: table-cell;
  vertical-align: middle;
}

3、脫離文件流的垂直居中。內部div固定高度，設定top為50%，接著使用負邊距的方式調整，將margin-top設定為負的高度的一半。

<div class="container">
  <div class="content">垂直居中</div>
</div>
.container {
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  height: 100px;//這個是需要居中的盒子的高度
  margin-top: -50px;//根據盒子的高度除以2
  left: 50%;
  width: 100px;//這個是需要居中的盒子的寬度
  margin-left: -50px;//根據盒子的寬度除以2
}

也可以將 margin-top: -50px 換成 transform: translateY(-50%)，這種方式可以不用已知元素高度。

4、彈性盒子。

<div class="container">
  <div class="content">垂直居中</div>
</div>
.container {
  display: flex;
  align-items: center;
}

或者

.container {
  display: flex;
}
.content {
  align-self: center;
}

三、水平垂直居中 可以將前面幾種方式結合起來實現水平垂直居中。

1、text-align: center 與 line-height 結合使用。

<div class="container">
  <span class="content">水平垂直居中</span>
</div>
.container {
  text-align: center;
  line-height: 100px;
}

2、text-align: center 與 display: table-cell 結合使用。

<div class="container">
  <div class="content">水平垂直居中</div>
</div>
.container {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.content {
  display: inline-block;
}

3、display: table-cell 與 margin: 0 auto 結合使用，如果內部元素是行內元素，可以結合display: table使用。

<div class="container">
  <div class="content">水平垂直居中</div>
</div>
.container {
  display: table-cell;
  vertical-align: middle;
}
.content {
  margin: 0 auto;
}

4、脫離文件流的居中方式

<div class="container">
  <div class="content">水平垂直居中</div>
</div>
.container {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
}

或者

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

或者

.content {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

5、彈性盒子。

<div class="container">
  <div class="content">水平垂直居中</div>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

或者

.container {
  display: flex;
}
.content {
  margin: auto;
}

6、CSS3的display: box屬性結合box-pack: center（水平），box-align: center（垂直）使用。目前主流瀏覽器都不支援，各瀏覽器通過相應的私有屬性支援，如下程式碼：

<div class="container">
  <div class="content">水平垂直居中</div>
</div>
.container {
  /* Internet Explorer 10 */
  display: -ms-flexbox;
  -ms-flex-pack: center;
  -ms-flex-align: center;

  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;

  /* Safari, Opera, and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

7、使用偽類:before

<div class="container">
  <div class="content">水平垂直居中</div>
</div>
.container {
  text-align: center;
}
.container:before {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.content {
  display: inline-block;
}