兩種方法實現CSS垂直居中

方法一：利用行高（line-height）定位

line-height一般是用於調節一段文字的行與行之間的距離，或者說兩行文字之間的距離，若是行高是500px，那麼每一行中的文字距離本行的頂部就是250px，若是將文字的行高設爲500px，而且外面的容器的高度也爲500px，一樣能夠實現垂直居中，可是用它來實現垂直居中，也是有缺點的，就是若是內容過多，文字就會跑到下一行，那麼內容就不可能垂直居中了。

HTML代碼：

<h1>Hi, I'm<span>Vertically Aligned</span> Within the H1</h1>

CSS代碼：

body {

1.          margin: 0;
   

2.          padding: 0;
   

3.          background: #1d1d1d;
   

4.          font-size: 10px;
   

5.          font-family: Verdana, Arial, Helvetica, sans-serif;
   

6. }
   

7. h1 {
   

8.          font: 3em Georgia, "Times New Roman", Times, serif;
   

9.          color: #fff;
   

10.          height: 500px;
    

11.          line-height: 500px;
    

12.          text-align:center;
    

13.          border: 10px solid #999;
    

14. }
    

15. h1 span {
    

16.          font-weight: bold;
    

17.          font-size:1.5em;
    

18.          color: #fff000;
    

19. }
    

20. p {
    

21.          font-size: 1.3em;
    

22.          color: #999;
    

23. }
    

24. strong {
    

25.          color: #fff;
    

26. }

方法二：利用絕對定位

這個方法有個缺點我必須指出，就是外面的塊狀元素，必須指定高度，因此若是你在裏面放動態的內容的話，後果會很糟糕滴~

HTML代碼：

<div class="vert">

1.         <h1>Hi, I'm<span>Vertically Aligned</span></h1>
   

2.         <p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>
   

3. </div>

CSS代碼：

這種用絕對定位來實現的垂直居中，取決與元素的寬度和高度，你能夠用下面這兩個公式來計算元素的左邊距和上邊距

元素的寬度/2 = 負左邊距
元素的高度/2 = 負上邊距

在這個例子中，咱們就是這麼計算的

.vert {

1.         width: 580px;
   

2.         height: 190px;
   

3.         position: absolute;
   

4.         top: 50%;
   

5.         left: 50%;
   

6.         margin: -95px 0 0 -290px;
   

7. }

完整CSS代碼：

body {

1.         margin: 0;
   

2.         padding: 0;
   

3.         background: #1d1d1d;
   

4.         font-size: 10px;
   

5.         font-family: Verdana, Arial, Helvetica, sans-serif;
   

6. }
   

7. h1 {
   

8.         font: 4em Georgia, "Times New Roman", Times, serif;
   

9.         color: #fff;
   

10.         border-bottom: 5px dotted #999;
    

11.         margin: 0;
    

12.         padding: 0 0 10px;
    

13. }
    

14. h1 span {
    

15.         font-weight: bold;
    

16.         display:block;
    

17.         font-size:1.5em;
    

18.         color: #fff000;
    

19. }
    

20. p {
    

21.         font-size: 1.3em;
    

22.         color: #999;
    

23. }
    

24. strong {
    

25.         color: #fff;
    

26. }
    

27. .vert {
    

28.         width: 580px;
    

29.         height: 190px;
    

30.         position: absolute;
    

31.         top: 50%;
    

32.         left: 50%;
    

33.         margin: -95px 0 0 -290px;
    

34. }

問題延伸

若是元素的外面還有一個父級元素，若是才能讓元素垂直居中於父級元素內部？好比下面的代碼，多了一個父級元素

<div class="container">

1.          <div class="vert">
   

2.           <h1>Hi, I'm Nested &<span>Vertically Aligned</span></h1>
   

3.           <p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>
   

4.          </div>
   

5. </div>

這時候，就必須在定義父級元素的CSS代碼中加入position: relative;纔可以使內部元素垂直居中於父級內部，代碼以下：

.container {

1.         position: relative;
   

2.         height: 500px;
   

3.         width: 800px;
   

4.         border: 10px solid #999;
   

5.         background: #000;
   

6.         margin: 20px;
   

7. }