CSS居中方法大全

阿新 • • 發佈：2018-12-05

水平居中

內聯或類內聯元素（譬如文字或連結）

在塊級父元素中讓內聯元素居中。

塊級元素

多個塊級元素

如果要讓多個塊級元素在同一水平線上居中，那麼可以修改它們的 display 值。這裡有兩個示例，其中一個使用了 inline-block 的顯示方式，另一個使用了 flexbox 的顯示方式。 HTML：

<main class="inline-block-center">
  <div>
    I'm an element that is block-like with my siblings and we' 
re centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<main class="flex-center" 
>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we' 
re centered in a row.
  </div>
</main>
複製程式碼

CSS:

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

.flex-center {
  display: flex;
  justify-content: center;
}
複製程式碼

如果你想讓多個垂直堆疊的塊元素，那麼仍然可以通過設定 margin-left 和 margin-right 為 auto 來實現。 HTML:

<main>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>
複製程式碼

CSS:

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  margin: 0 auto;
  color: white;
  padding: 15px;
  margin: 5px auto;
}

main div:nth-child(1) {
  width: 200px;
}
main div:nth-child(2) {
  width: 400px;
}
main div:nth-child(3) {
  width: 125px;
}
複製程式碼

垂直居中

內聯或類內聯元素（譬如文字或連結）

單行

只需新增等值的 padding-top 和 padding-bottom 就可以實現垂直居中。

如果不能使用 padding 屬性來實現垂直居中，而且已知文字不會換行，那麼就可以讓 line-height 和 height 相等，從而實現垂直居中。

多行

對於多行文字，同樣可以使用等值 padding-top 和 padding-bottom 的方式實現垂直居中。如果你在使用過程中發現這種方法沒見效，那麼你可以通過 CSS 為文字設定一個類似 table-cell 的父級容器，然後使用 vertical-align屬性實現垂直居中。 HTML:

<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>

<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
複製程式碼

CSS:

body {
  background: #f06d06;
  font-size: 80%;
}

table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}

table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}

.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}
複製程式碼

還可以使用 flexbox 實現垂直居中，對於父級容器為 display: flex 的元素來說，它的每一個子元素都是垂直居中的。

上述方法只適用於父級容器擁有確定高度的元素。 如果上述方法都不起作用，那麼你就需要使用被稱為幽靈元素（ghost element）的解決方式：在垂直居中的元素上新增偽元素，設定偽元素的高等於父級容器的高，然後為文字新增vertical-align: middle; 樣式，即可實現垂直居中。

HTML:

<div class="ghost-center">
  <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>
複製程式碼

CSS:

body {
  background: #f06d06;
  font-size: 80%;
}

div {
  background: white;
  width: 240px;
  height: 200px;
  margin: 20px;
  color: white;
  resize: vertical;
  overflow: auto;
  padding: 20px;
}

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
  width: 190px;
  margin: 0;
  padding: 20px;
  background: black;
}
複製程式碼

塊級元素

已知元素高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
複製程式碼