CSS實現垂直居中的經常使用方法

時間 2019-11-12

標籤 css 實現垂直居中經常使用方法欄目 CSS 简体版

原文原文鏈接

在前端開發過程當中，盒子居中是經常用到的。css

其中，居中又能夠分爲水平居中和垂直居中。html

水平居中是比較容易的，直接設置元素的margin: 0 auto就能夠實現。前端

可是垂直居中相對來講是比較複雜一些的。瀏覽器

下面咱們一塊兒來討論一下實現垂直居中的方法。佈局

首先，定義一個須要垂直居中的div元素，他的寬度和高度均爲300px，背景色爲橙色。代碼以下：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

效果以下：3d

咱們須要使得這個橙色的div居中，到底該怎麼辦呢？首先咱們讓實現水平居中，上面已經提到過了，能夠經過設置margin: 0 auto實現水平居中，代碼以下：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

效果以下：orm

很好，已經實現水平居中了！接下來該打大boss了——實現垂直居中。htm

不過，在這以前，咱們先要設置div元素的祖先元素html和body的高度爲100%（由於他們默認是爲0的），而且清除默認樣式，即把margin和padding設置爲0（若是不清除默認樣式的話，瀏覽器就會出現滾動條，聰明的親，本身想一想問什麼）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0; 
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

接下來，咱們須要作的事情就是要讓div往下移動了。咱們都知道top屬性可使得元素向下偏移的。可是，因爲默認狀況下，元素在文檔流裏是從上往下、從左到右佈局的，咱們是不能夠直接經過top屬性改變他的垂直偏移的。這就就須要使用position屬性使它脫離文檔流流了。這很簡單，只要設置它的值爲relative就好了。對於position屬性不熟悉的，能夠本身去w3c看一下。下面咱們就讓div脫離文檔流:

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

咱們刷新一下頁面，發現跟以前是沒有任何變化的，由於，咱們僅僅是使div脫離了文檔流，可是還沒開始移動他的垂直偏移。好，下面咱們就讓它偏移吧！垂直偏移須要用到top屬性，它的值能夠是具體的像素，也能夠是百分數。由於咱們如今不知道父元素（即body）的具體高度，因此，是不能夠經過具體像素來偏移的，而應該用百分數。既然是要讓它居中嘛！好，那麼咱們就讓它的值爲50%不就好了嗎？問題真的那麼簡單，咱們來試一下，就設置50%試一下：

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

效果以下圖所示：

div垂直方向上面並無居中。明顯是偏下了。下面，咱們在瀏覽器中間畫一條紅線用來參考，以下圖：

經過觀察上圖，只要讓div的中心移動到紅線的位置，那麼整個div就居中了。那怎麼讓它中心移動到紅線處呢？從圖中能夠觀察到，從div的中心到紅線的距離是div自身高度的一半。這時候，咱們可使用經過margin-top屬性來設置，由於div的自身高度是300，因此，須要設置他的margin-top值爲-150。爲何是要設置成負數的呢？由於正數是向下偏移，咱們是但願div向上偏移，因此應該是負數，以下：

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

效果以下：

確實已經居中了。好興奮！有木有？！

除了可使用margin-top把div往上偏移以外，CSS3的transform屬性也能夠實現這個功能，經過設置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。以下：

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

效果以下：

上面的兩種方法，咱們都是基於設置div的top值爲50%以後，再進行調整垂偏移量來實現居中的。若是使用CSS3的彈性佈局（flex）的話，問題就會變得容易多了。使用CSS3的彈性佈局很簡單，只要設置父元素（這裏是指body）的display的值爲flex便可。具體代碼以下，對代碼不作過多的解釋，若是想了解彈性佈局的能夠看阮一峯老師的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            align-items: center; /*定義body的元素垂直居中*/
            justify-content: center; /*定義body的裏的元素水平居中*/
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;        
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

效果：

除了上面3中方法以外，固然可能還存在許多的能夠實現垂直居中的方法。好比能夠將父容器設置爲display:table ，而後將子元素也就是要垂直居中顯示的元素設置爲 display:table-cell 。可是，這是不值得推薦的，由於會破壞總體的佈局。若是用table佈局，那麼爲何不直接使用table標籤了？那不更加方便嗎？

http://www.codeceo.com/article/css-vertical-align-center.html