CSS佈局之水平居中和垂直居中

weixin_34279579發表於2017-09-07
CSS

一、前言

開發中給標籤(元素)設定居中的使用場景非常頻繁，不同的標籤型別設定方式也不同，本文旨在總結一套常用和標準的設定方式，同時也深入解析這樣實現的原理。首先，我們大概來過一下一些必要的HTML知識點，有經驗的童鞋可以略過。

二、HTML標籤型別

1，HTML有N多標籤，根據顯示的型別，主要可以分為3大類。

  • 塊級標籤：獨佔一行的標籤。能隨時設定寬度和高度（比如div、p、h1、h2、ul、li）。
  • 行內標籤(內聯標籤)：多個行內標籤能同時顯示在一行。寬度和高度取決於內容的尺寸（比如span、a、label）。
  • 行內-塊級標籤(內聯-塊級標籤)：多個行內-塊級標籤可以顯示在同一行。能隨時設定寬度和高度（比如input、button）。

2，修改標籤的顯示型別。不同型別的標籤在進行佈局時都有它們的侷限性，要麼不能多行顯示，要麼不能設定標籤的尺寸，比如說塊級標籤div在頁面中隨處可見，但是獨佔一行，如果我們需要它能夠在多行顯示，就需要修改標籤的顯示型別為行內-塊級標籤，因為行內-塊級標籤既可以多行顯示又可以設定標籤的寬高。當然我們可以根據不同的佈局需求來修改標籤的顯示型別。在CSS中，我們可以通過display屬性來達到目的，下面是它的可選取值：

  • none：隱藏標籤
  • block：讓標籤變為塊級標籤
  • inline：讓標籤變為行內標籤
  • inline-block：讓標籤變為行內-塊級標籤

三、水平居中

1. 行內標籤、行內-塊級標籤

在父標籤的樣式中設定：

text-align: center

在這裡text-align有兩個作用：

  • text-align會讓所有的子標籤水平居中對齊。
  • text-align是繼承屬性，子標籤因為繼承了text-align的居中屬性，裡面的內容也會居中對齊。
    PS：給子標籤自己設定text-align，只會作用於標籤中的內容的對齊方式。

2. 塊級標籤

1> 先上案例，在body中新增了一對div標籤main，裡面又巢狀了一對div標籤test，我們知道塊級標籤獨佔一行，可以修改寬高尺寸，所以為了演示，我們修改main的寬度為300px，高度為200px。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML標籤的居中</title>
    <style>
        #main{
            background-color: red;
            width: 300px;
            height: 200px;
        }
        .test{
            background-color: yellow;
        }
    </style>
</head>
<body>
   <div id="main">
       <div class="test">我是塊級標籤</div>
   </div>
</body>
</html>

顯示效果如下:

301530-c2412ec4be9c9553.png
塊級標籤水平居中演示--01

2> 我們在父標籤main中新增text-align屬性為center，顯示效果如下：

301530-5e44c730ec975cc8.png
塊級標籤水平居中演示--02

看起來貌似跟行內標籤一樣，只需要在父標籤中新增text-align屬性為center即可，但是塊級標籤可以設定寬高尺寸，所以我們來改變一下子標籤test的尺寸，設定寬度為200px，再來看看樣式和效果：

.test{
    background-color: yellow;
    width: 200px;
}
301530-71bc25e3e544dc4e.png
塊級標籤水平居中演示--03

我們可以發現，子標籤test的內容是水平居中了，因為繼承了父標籤的text-align屬性，但是標籤自身沒有水平居中。那怎麼才能居中呢，我們想可不可以從標籤的外邊距margin入手呢，比如先設定子標籤test的左外邊距為auto，樣式和效果如下：

.test{
    background-color: yellow;
    width: 200px;
    margin-left: auto;
}
301530-bad6b82e3e5cc881.png
塊級標籤水平居中演示--04

我們可以看到子標籤test向右靠齊了，那我們想可不可以再新增一個右外邊距為auto呢，樣式和效果如下：

.test{
    background-color: yellow;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
301530-dc72817fc39ffbc4.png
塊級標籤水平居中演示--05

我們可以看到子標籤test終於水平居中了，達到了我們想要的效果?。下面總結一下塊級標籤設定水平居中的方式，分兩步：

  • 在父標籤的樣式中設定：
text-align: center
  • 同時在自身的樣式中設定：
margin:0 auto

PS：margin-left 和 margin-right 可以用margin這一個多值屬性來代替，兩個值時，第一個代表上下兩個外邊距的值，第二個代表左右兩個外邊距的值。

四、垂直居中

1. 行內標籤、行內-塊級標籤

在父標籤的樣式中新增：

line-height: height

1> line-height：內容的高度，這裡的內容比如有文字或圖片。
2> height：標籤內容的真實高度，標準的盒子模型中真實的內容尺寸等同於padding包含的內容的尺寸(包括padding的值)，IE的盒子模型中真實的內容尺寸等同於border包含的內容的尺寸(包括border的值)，具體可以參考CSS盒子模型。如下樣式程式碼：

#main{
   background-color: red;
   width: 300px;
   height: 200px;
   text-align: center;
   line-height: 200px;
}

2. 塊級標籤

1> 先上案例，在body中新增了一對div標籤main，裡面又巢狀了一對div標籤test，我們知道塊級標籤獨佔一行，可以修改寬高尺寸，所以為了演示，我們修改main的寬度為300px，高度為200px。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML標籤的居中</title>
    <style>
        #main{
            background-color: red;
            width: 300px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
        .test{
            background-color: yellow;
            width: 200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
   <div id="main">
       <div class="test">我是塊級標籤</div>
   </div>
</body>
</html>

顯示效果如下:

301530-87231c28ece88c07.png
塊級標籤垂直居中演示--01

看起來貌似又沒問題，現在我改變一下塊級標籤的高度，把height改為100px，效果如下：

301530-def2119ff1982595.png
塊級標籤垂直居中演示--02

可以看到文字內容還是在中間，但是子標籤test的高度已經改變了，為什麼文字內容還在中間呢，這是因為父標籤main設定了line-height等於height的原因，子標籤test繼承了父標籤line-height的值，所以我們可以在子標籤裡面設定自身的line-height的值，樣式程式碼和效果如下：

.test{
    background-color: yellow;
    width: 200px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
}
301530-923c47de7995933f.png
塊級標籤垂直居中演示--03

好了，接下來需要做的是讓子標籤test在父標籤垂直居中顯示。有兩種方式，第一種，用彈性佈局的思想，只需在子標籤test中新增下列屬性：

display: flex;
flex-direction: column;
justify-content: center;

第二種，用定位的技巧來實現：

<style>
    #main{
        background-color: red;
        width: 300px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        position: relative;
    }
    .test{
        background-color: yellow;
        width: 200px;
        height: 100px;
        line-height: 100px;
        margin: 0 auto;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate( -50%, -50%);
    }
</style>

最終效果：


301530-78cac5ba786c2a07.png
塊級標籤垂直居中演示--04

五、總結

最後以一張圖來總結：

301530-b6ba0b854b475808.png
標籤的居中

最後，如果有什麼問題歡迎向我指出，謝謝。

相關文章