国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

首頁/文章專欄/[譯]CSS 居中（Center）方法大合集

[譯]CSS 居中（Center）方法大合集

wayneli 發(fā)布于2019-08-30 13:04 / 3322人閱讀

摘要：并排顯示，要求相同高度如果要求多個塊級元素并排居中且高度相同，則要為其父元素設(shè)置屬性。成一列顯示如果只是需要讓多個塊級元素整體水平居中，并且按默認(rèn)的方式縱向排列，那直接設(shè)置左右邊距為即可。

原文出處：Centering in CSS: A Complete Guide

本文只給出了不同條件下的實(shí)現(xiàn)方式，未對原理做探討。
PS：原來要顯示 jsfiddle 和 CodePen 之類網(wǎng)站的代碼預(yù)覽，只需將其以 Markdown 語法來插入鏈接即可。

水平居中 行內(nèi)元素

對于行內(nèi)元素（inline）或復(fù)合行內(nèi)元素（inline-*），直接為其父元素設(shè)置文本居中即可。

.center-children {
  text-align: center;
}

http://codepen.io/chriscoyier/pen/HulzB

該方法適用于 inline、inline-block、inline-table、inline-flex 之類的元素。

塊級元素

對于塊級元素，如果給定了寬度，直接設(shè)置左右邊距為 auto 即可。
注意：對于未指定寬度的元素，默認(rèn)會占滿允許的最大寬度，這時設(shè)置居中是無效的。

.center-me {
  margin: 0 auto;
}

http://codepen.io/chriscoyier/pen/eszon

不管元素或者父元素的寬度如何，只要指定了寬度，該方法就有效。

但是，對于設(shè)置了浮動（float）的元素就不行了，這里有一個取巧的辦法可以實(shí)現(xiàn)浮動元素居中。

多個塊級元素

對于多個塊級元素需要整體居中的情況，還可細(xì)分為以下三類：

并排顯示，高度無要求

如果不要求并排的多個塊級元素有同樣的高度，那么可為這些塊級元素的父元素設(shè)置 display: inline-block 屬性，以實(shí)現(xiàn)所需效果。


  I"m an element that is block-like with my siblings and we"re centered in a row.
  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.
  I"m an element that is block-like with my siblings and we"re centered in a row.

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

http://codepen.io/chriscoyier/pen/ebing

并排顯示，要求相同高度

如果要求多個塊級元素并排居中且高度相同，則要為其父元素設(shè)置 display: flex 屬性。


  I"m an element that is block-like with my siblings and we"re centered in a row.
  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.
  I"m an element that is block-like with my siblings and we"re centered in a row.

.flex-center {
  display: flex;
  justify-content: center;
}

成一列顯示

如果只是需要讓多個塊級元素整體水平居中，并且按默認(rèn)的方式縱向排列，那直接設(shè)置左右邊距為 auto 即可。

http://codepen.io/chriscoyier/pen/haCGt

垂直居中

要實(shí)現(xiàn)元素的垂直居中就需要一些小技巧了。

行內(nèi)元素 單行內(nèi)容

為行內(nèi)元素/文本元素設(shè)置相等的上下內(nèi)邊距即可實(shí)現(xiàn)單行元素的垂直居中。

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

http://codepen.io/chriscoyier/pen/ldcwq

如果出于種種原因不能用上面的設(shè)置上下內(nèi)邊距的方式，那么可以設(shè)置行高與元素的高度相同，這樣也能實(shí)現(xiàn)垂直居中的效果，但是使用這種方法要保證文本不會換行。

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

http://codepen.io/chriscoyier/pen/LxHmK

多行內(nèi)容

對多行文本設(shè)置相等的上下內(nèi)邊距也是可以實(shí)現(xiàn)垂直居中的，但是有時候會因為文本在表格的單元格中，或者文本所屬的元素通過 CSS 設(shè)置為表格單元格的表現(xiàn)方式，而無法實(shí)現(xiàn)垂直居中的效果。在這種情況下，可以用 vertical-align 屬性來實(shí)現(xiàn)垂直居中。

http://codepen.io/chriscoyier/pen/ekoFx

上面的方式不可行的話，還可以使用 flexbox，flex 只有一個子元素的話，要實(shí)現(xiàn)垂直居中還是很簡單的。

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

http://codepen.io/chriscoyier/pen/uHygv

對于 flexbox 方法，原文中說到父元素有指定高度之后，這種方法才有意義，但是通過測試代碼發(fā)現(xiàn)，父元素未指定高度也是可以垂直居中的。
Remember that it"s only really relevant if the parent container has a fixed height (px, %, etc), which is why the container here has a height.

除此之外，還可以使用 ghost element，這種方法是將一個完整高度的偽類放在容器中，讓文本與這個偽類縱向居中對齊。

.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;
}

http://codepen.io/chriscoyier/pen/ofwgD

塊級元素 元素高度已知

在網(wǎng)頁布局中，元素高度不確定的情況很普遍：比如元素寬度改變，文本重排之后元素高度就會改變。文本的樣式不同，元素高度也會不同。文本的字?jǐn)?shù)不同，元素高度也會不同。具有固定高寬比的元素，比如圖片，當(dāng)尺寸改變時，其高度也會變化，等等情況。

但是如果元素高度已知，可以用下面的方法來實(shí)現(xiàn)垂直居中：

.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; */
}

http://codepen.io/chriscoyier/pen/HiydJ

元素高度未知

該方法就是先將元素相對于其原始位置向下移動父元素高度的一半距離，再將該元素相對其本身的高度向上移動一半，這樣就能實(shí)現(xiàn)垂直居中的效果了。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

http://codepen.io/chriscoyier/pen/lpema

簡單粗暴的 flexbox

用 flexbox 的話，實(shí)現(xiàn)起來就簡單多了。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

http://codepen.io/chriscoyier/pen/FqDyi

水平和垂直均居中

簡單地把上面提到的實(shí)現(xiàn)水平居中和垂直居中的方法結(jié)合起來自然是可以的，但是這個需求也可以分為以下三類來實(shí)現(xiàn)：

元素寬度及高度已知

將元素相對于其父元素的寬度/高度值向右并向下移動一半的距離，這時元素左上角的頂點(diǎn)剛好位于父元素的中心。然后再通過設(shè)置負(fù)邊距值的方法，將元素相對于其自身的寬度/高度值向左并向上移動一半的距離，就可實(shí)現(xiàn)水平垂直均居中的效果了。并且這種方法的瀏覽器兼容性是很好的。

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

http://codepen.io/chriscoyier/pen/JGofm

元素的寬度或高度未知

如果元素的寬度或者高度未知，則在將元素相對于父元素的寬高往向右并向下移動一半距離后，再用 transform 屬性來將其向左并向上移動自身寬度及高度值一般的距離即可。

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

http://codepen.io/chriscoyier/pen/lgFiq

flexbox 大法

要通過 flexbox 來實(shí)現(xiàn)水平垂直均居中，就要使用兩個居中屬性來實(shí)現(xiàn)：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

http://codepen.io/chriscoyier/pen/msItD

PS: 剛發(fā)現(xiàn)還可以通過下面的方式實(shí)現(xiàn)子元素水平及垂直均居中：

.parent {
    display: flex;
    justify-content: center;
}

.child {
    // 不加這一條的話，子元素的高度將撐滿父元素。加了這一條，才能讓子元素以正常的高度顯示，并且在垂直方向上居中。
    margin: auto 0;
}

總結(jié)

信 CSS，得永生。