CSS之各種居中

Labradors 發布于2019-08-02 16:01 / 460人閱讀

摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學過程中，居中這個問題經常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內元素才能進行居中。結語以上的方法基本上可以用完成各種情況的居中。

前言

在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學CSS過程中，居中這個問題經常困擾到我。那為什么CSS的居中這么煩人呢？ 我認為，這是因為CSS的居中方法以及它的適用范圍太多了，而導致應用時很難分清到底哪個有效。下面我就簡單地梳理一下CSS的居中方法。

水平居中 1.行內元素的水平居中

對于行內元素（如text、link或inline-*元素）的水平居中：

.inline {
  text-align: center;
}

這種方法對于inline-block、inline-table等等都有效。

2.塊級元素的水平居中

對于塊級元素（如div、p等）的水平居中：

.block {
    margin: 0 auto;
}

這種方法就是把margin-left和margin-right設置成auto。但這種方法前提是你要設置好塊級元素的寬度，否則它的寬度就會鋪滿其父級元素。

3.多個塊級元素的水平居中

當需要多個塊級元素在一行內居中時，我們可以把它們設置為inline-block或者flex。

1）inline-block

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

2）flexbox

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

垂直居中

垂直居中比水平居中要更加復雜，下面我會按照思考的過程來逐步梳理垂直居中的方法（包括不可行的方法）：

1）

既然塊級元素的水平居中可以使用margin: 0 auto，那么垂直居中能不能用margin: auto 0呢？不能。因為margin-top如設為auto，默認值為0。

2）

OK，那我手動利用calc指定margin-top

margin-top: calc(50%-50px);

這樣總行了吧？不行。因為margin-top的百分比竟然是以父元素的寬度為參照。

好吧，那我用relative吧：

position: relative;
top: calc(50%-50px);

這次總歸行了。但是這種方法缺點就是元素的高度不能變。

4）

對于inline-element和table-cell，垂直居中同樣可以使用vertical-align:

display: table-cell;
vertical-align: middle;

但這時由于table-cell是inline，寬度將會變成和子元素一樣，而當強制指定width為100%時，子元素高度會變成和父元素一樣。

5）

使用偽元素：


    垂直居中

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

.box:before {
  content:"";
  display:inline-block;
  height: 100%;
  vertical-align:middle;
}

.box span {
  vertical-align:middle;
}

這種方法的前提是要是行內元素才能進行居中。
那為什么添加偽元素在這里會有效呢？ 根據W3C標準對vertical-align的定義是：該屬性會影響由一個行內級元素生成的盒的行框內部的垂直定位。

那么偽元素在這里就是生成了一個空的100%高度的行內盒，然后行內元素以這個行內盒為基線進行垂直居中。

使用flex布局：

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

水平垂直居中

關于水平垂直居中，方法也有很多，很繁瑣。有些可以把水平居中的方法和垂直居中的方法結合（例如添加偽元素方法的text-align + vertical-align）,在這里我就不一一介紹，只是介紹一種最好的方法——幾乎萬能的flex布局：

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

justify-content影響flex-item在主軸上的位置；而align-item則會影響flex-item在交叉軸上的位置。

結語

以上的方法基本上可以用CSS完成各種情況的居中。如果讀者覺得有補充或者哪個地方講述錯誤，歡迎指正。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54526.html

CSS之各種居中

摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學過程中，居中這個問題經常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內元素才能進行居中。結語以上的方法基本上可以用完成各種情況的居中。前言在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學CSS過程中，居中這個問題經常困擾到我。那為什么CSS的居中這么煩人呢？我認為，這是因為CSS的居中方法以及它的適...

Taste 2019-08-30 14:13 評論0 收藏0
CSS之各種居中

摘要：轉自個人博客本博客討論居中情況設定為總寬度不定內容寬度不定的情況。改變大小時，仍然居中。寬高改變時，不再是居中效果。配合優點居中元素不對其他元素產生影響。水平居中當父元素設置時，子元素為，默認為內容寬度。轉自個人博客本博客討論居中情況設定為總寬度不定,內容寬度不定的情況。（改變大小時，仍然居中）。特別說明：在元素設置position:absolute;來設置居中效果時，除去博客...

happyfish 2019-08-28 18:29 評論0 收藏0
老生常談之CSS的垂直居中

摘要：在通常情況下，對那些需要居中的元素來說，其尺寸往往是由其內容來決定的。雖然沒有垂直居中效果，但也是完全可以接受的。的另一個好處在于，它還可以將匿名容器即沒有被標簽包裹的文本節點垂直居中。主要摘自：《CSS 揭秘》，強烈推薦的一本書。 44 年前我們就把人類送上月球了，但現在我們仍然無法在 CSS 中實現垂直居中。——James Anderson(https://twitter.co...

CompileYouth 2019-08-30 15:55 評論0 收藏0
CSS之元素居中

摘要：多個塊級元素按行放置將塊級元素設置為行內元素父元素內容居中。塊級元素使用絕對定位。需要知道子元素的高度。水平垂直居中思路跟之前一樣。水平方向行內元素 .center-children { text-align: center; } 適用于行內元素，行內塊元素。塊級元素 .center-children { margin: 0 auto; } margin左右設置為auto...

wapeyang 2019-08-30 13:20 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0