CSS中的幾種垂直居中方法

原創

2020-02-22 04:41

在CSS中要實現水平居中很容易實現，給標籤設置一個寬度，並設置margin屬性，margin 0 auto；即可實現塊級元素的水平居中。而要實現垂直居中則要相對複雜一點，以下介紹幾種方法實現垂直居中。
1.首先清除祖先元素的樣式，通過設置margin：0；padding:0;設置需要居中元素的postion屬性，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .test{
            width: 300px;
            height: 300px;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脫離文檔流*/
            top: 50%; /*偏移*/
            margin-top: -150px; 
        }
    </style>
</head>
<body>
    <div class="test"></div>
</body>
</html>

設置postion爲relative,由於不知道文檔的具體大小，top的值可用百分比代替，margin-top將自身向上平移自身寬度的一半，這樣可實現垂直居中。margin-top可用CSS3中的新屬性，transform：translateY（-50%），使div向上平移自身的一半。
在這裏講一下關於自己對relative和absolute的理解，relative代表的是相對佈局，指元素的相對位置，沒有脫離文檔流；absolute絕對定位，脫離文檔流，通過設置父元素的postion的值爲relative，子元素的postion的值爲absolute，使子元素相對於父元素的位置移動。
2.第二種方法是採用CSS3中的彈性佈局（flex），使用這種方法只需要設置父元素的display的值爲flex，例子代碼如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body{
            display:flex;
            align-items:center;//定義body中的元素垂直居中
            justify-content:center;//定義body中的元素水平居中

        }
        .test{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="test"></div>
</body>
</html>