網頁前端居中問題

妄：狂妄；

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

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來實現居中。
注：此時需保證：position: relative;

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

2. 不定寬塊狀元素居中

在實際工作中我們會遇到需要爲“不定寬度的塊狀元素”設置居中，比如網頁上的分頁導航，因爲分頁的數量是不確定的，所以我們不能通過設置寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度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 的道理同上。