1. 程式人生 > >“妄”眼欲穿之CSS 居中問題

“妄”眼欲穿之CSS 居中問題

妄:狂妄;

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

作為一個什麼都不會的小白,為了學習,特別在拿來主義之後寫一些對於某些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 的道理同上。