妄：狂妄；

不會的東西只有懷著一顆狂妄的心，假裝能把它看穿吧。

作為一個什麼都不會的小白，為了學習，特別在拿來主義之後寫一些對於某些css佈局的總結，進一步加深對知識的記憶。知識是人類的共同財富，中華大地之上，皆是華夏兒女的智慧結晶。如心中也懷有拿來主義，可慢慢竊走吧，這不是偷，只是竊罷了。我們的孔大人說過的，竊書罷了，不叫偷。

CSS居中問題

1 text-align：center

文字居中問題（圖片）

2 align-content

此屬性只適用於多行的flex容器，並且當側軸上有多餘空間使flex線對齊

使用前提：flex佈局；

（見“妄”眼欲穿-CSS之flex佈局和邊框陰影）

任意佈局：display:flex;

行內元素：display:inline-flex;

3 居中總結

3.1 水平居中

3.1.1行內元素居中（文字（text）、圖片（img）、按鈕等）

text-align:center;

3.1.2塊狀元素居中

1. 定寬塊狀元素居中

滿足寬度（塊狀元素的寬度width為固定值）和塊狀兩個條件的元素可以通過左右margin值為auto來實現居中。

.div1{
　　　　 width:200px;
　　　　 border:1px solid red;
        margin:0 auto;
     }
<div class="div1">Hello world</div>
 

1. 不定寬塊狀元素居中

在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)

​ i. 改變塊級元素的display為inline型別（設定為行內元素顯示），然後使用text-align實現居中效果。

​ ii. 通過給父元素設定float，然後給父元素設定position：relative和left：50%，子元素設定position：relative和left：-50%來實現水平居中。

3.2 垂直居中

1. 父元素高度確定的單行文字

   ​ 通過設定父元素的height和line-height高度一致來實現的（height為元素的高度，line-height為行高，指在文字中，行與行之間的基線間的距離）。

2. 父元素高度確定的多行文字

   ​ 使用插入table（包括body、tr、td）標籤，同時設定vertical-align：middle。

3.3 水平垂直居中

#login_box {
      width: 300px;
      height: 150px;
      border: 1px solid #ccc;
      position: absolute;
      left: 50%;top: 50%;
      margin-left: -150px;
      margin-top: -75px;
    }

這幾行在#login_box中的目的是使其在瀏覽器中水平居中顯示。（無論瀏覽器被如何拉伸，該login_box始終保持居中）

原理（對齊瀏覽器的中心點與#login_box的中心點，這樣就使得.foot在瀏覽器中水平居中了）：

left:50%; 使#login_box左邊框距離瀏覽器左邊50% ，所以login_box整體並不是位於瀏覽器中間，

需要使用margin-left: -150px; 使#login_box向左移動150畫素（即login_box自身寬度的一半）。這樣box整體就位於瀏覽器中間了。

top: 50%; margin-top: -75px 的道理同上。