1. 程式人生 > >CSS居中方法大全

CSS居中方法大全

水平居中

內聯或類內聯元素(譬如文字或連結)

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

圖片.png
圖片.png

塊級元素

圖片.png
圖片.png

多個塊級元素

如果要讓多個塊級元素在同一水平線上居中,那麼可以修改它們的 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;
}
複製程式碼

圖片.png

如果你想讓多個垂直堆疊的塊元素,那麼仍然可以通過設定 margin-leftmargin-rightauto 來實現。 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;
}
複製程式碼

圖片.png

垂直居中

內聯或類內聯元素(譬如文字或連結)

單行

圖片.png
只需新增等值的 padding-toppadding-bottom 就可以實現垂直居中。
圖片.png

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

圖片.png

多行

對於多行文字,同樣可以使用等值 padding-toppadding-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;
}
複製程式碼

圖片.png

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

圖片.png

圖片.png

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

圖片.png
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;
}
複製程式碼

圖片.png

塊級元素

已知元素高度

.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; */
}
複製程式碼

圖片.png
圖片.png

元素高度未知

如果我們不知道元素的高度,那麼就需要先將元素定位到容器的中心位置,然後使用 transformtranslate 屬性,將元素的中心和父容器的中心重合,從而實現垂直居中。

圖片.png

圖片.png

圖片.png

使用flexbox

圖片.png
圖片.png

圖片.png

水平垂直居中

寬高固定

設定父級容器為相對定位的容器,設定子元素絕對定位的位置 position: absolute; top: 50%; left: 50%,最後使用負向 margin 實現水平和垂直居中,margin 的值為寬高(具體的寬高需要根據實際情況計算 padding)的一半。

圖片.png
圖片.png
圖片.png

寬高未知

圖片.png
如果無法獲取確定的寬高,同樣需要設定父級容器為相對定位的容器,設定子元素絕對定位的位置 position: absolute; top: 50%; left: 50%。不同的是,接下來需要使用 transform: translate(-50%, -50%); 實現垂直居中。

圖片.png
圖片.png
使用 transform 有一個缺陷,就是當計算結果含有小數時(比如 0.5),會讓整個元素看起來是模糊的,一種解決方案就是為父級元素設定 transform-style: preserve-3d; 樣式。
圖片.png

使用flexbox

使用 flexbox 實現水平和垂直居中,只需使用兩條居中屬性。

圖片.png
圖片.png
圖片.png

使用grid

當只有一個元素的時候,這是個小技巧。

圖片.png
圖片.png
圖片.png

感謝閱讀本文。 本文整理自: Centering in CSS: A Complete Guide CSS居中完整指南