CSS常見佈局總結

阿新 • • 發佈：2019-02-01

居中

元素水平居中

行內元素水平居中

text-align:center;

塊元素水平居中

margin:0 auto;

注意： margin 是複合屬性，也就是說 margin: auto; 其實相當於 margin: auto auto auto auto;，margin: 0 auto;相當於 margin: 0 auto 0 auto;
根據規範，margin-top: auto; 和 margin-bottom: auto;，其計算值為0。這也就解釋了為什麼 margin: auto; 等同於 margin: 0 auto;

單行文字垂直居中

height:n px;
line-height 
:n px;

文字相對圖片、輸入框垂直居中

vertical-align:middle;

單行文字垂直居中

文字垂直居中

text-align + line-height實現單行文字水平垂直居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type 
="text/css">
    .box{
        line-height: 200px;
        width: 200px;
        height: 200px;
        background-color: red;
        color: #fff;
        text-align: center;
    }
    </style>
</head>
<body>
<div class="box">
我要垂直居中
</div>
</body>
</html>

水平居中

水平居中實現只要設定margin：0 auto;就可以實現

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>水平居中</title>
        <style type="text/css">
        #box{width: 200px;height: 200px;background: red;margin: 0 auto;}
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
        <style type="text/css">
        #box{
            width: 200px;height: 200px;background: red;position:absolute;top:50%;margin-top: -100px;
        }
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

CSS實現水平垂直居中

使用absolute

方法一

利用絕對定位元素的盒模型特性，在偏移屬性為確定值的基礎上，設定margin:auto

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
        .wrap{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .inner{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="inner"></div>
</div>
</body>
</html>

方法二

在子元素寬高已知的情況下，可以配合margin負值達到水平垂直居中效果。
使用絕對定位將content的定點定位到body的中心，然後使用負margin（content寬高的一半），將content的中心拉回到body的中心，達到水平垂直居中的效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>css實現水平垂直居中</title>
        <style type="text/css">
        .box{
        width:200px;
        height:200px;
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-100px;
        margin-top: -100px;
    }
        </style>
    </head>
    <body>
    <div class="box"></div>
    </body>
</html>

方法三

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中佈局</title>
        <style type="text/css">
        html,body{
            width: 100%;height: 100%;margin: 0;padding: 0;
        }
        #box {
            width: 300px;
            height: 300px;
            background: red;
            margin: 0 auto; /*水平居中*/
            position: relative;/*相對自己當前進行定位*/
            top: 50%;
            margin-top: -150px;
        }
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

方法四—CSS3實現垂直水平居中

利用絕對定位元素的偏移屬性和CSS3的translate(translate 函式的動畫是利用 GPU，能夠減少瀏覽器重繪)來實現的自身偏移達到水平垂直居中的效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS3實現垂直水平居中</title>
        <style type="text/css">
        #div1{
            width: 200px;height: 200px;background: red;
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%,-50%); /* 這裡我們使用css3的transform來達到類似效果 */
        }
        </style>
    </head>
    <body>
    <div id="div1"></div>
    </body>
</html>

CSS3 flex實現元素的垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中佈局</title>
        <style type="text/css">
        html,body{
            width: 100%;height: 100%;margin: 0;padding: 0;
        }
        body{
            display: flex;align-items: center;justify-content: center;
        }
        #box{
            width: 200px;height: 200px;background: red;
        }
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

flex實現垂直水平居中

margin: auto–完美的居中

使用彈性盒子(display: flex)，居中變的很簡單，只想要設定 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>margin垂直水平居中</title>
    <style type="text/css">
    .box{
        width: 500px;
        height: 500px;
        background: #ccc;
        display: flex;
        display: -webkit-flex;
    }
    .inner{
        background: red;
        width: 100px;
        height: 100px;
        margin: auto;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="inner"></div>
</div>
</body>
</html>

方法二

在伸縮容器上使用主軸對齊justify-content和側軸對齊align-items

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS3 Flexbox輕鬆實現元素的垂直水平居中</title>
        <style type="text/css">
        .box{
            display: flex;
            width: 980px;
            height: 30rem;
            align-items:center;
            justify-content: center;
            background: #0099cc
        }
        h1{
            font-size: 1rem;
            padding: 1rem;
            border: 1px dashed #FFF;
            color: #FFF
        }
        </style>
    </head>
    <body>
    <div class="box">
        <h1>CSS3</h1>
    </div>
    </body>
</html>

table-cell實現元素水平垂直居中

方法一

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
        .wrap{
            display: table-cell;/*此元素會作為一個表格單元格顯示*/
            vertical-align: middle;
            text-align: center;
            background-color: red;
            width: 200px;
            height: 200px;
            border: 1px solid yellow;
        }
        .inner{
            display: inline-block;/*為了防止塊級元素的寬度預設等於其父元素*/
            background-color: blue;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="wrap">
        <div class="inner">我要實現水平垂直居中</div>
</div>
</body>
</html>

方法二

若子元素是影象，可不使用table-cell，而是其父元素用行高替代高度，且字型大小設為0。子元素本身設定vertical-align:middle。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
        .wrap{
            width: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 0;
            background-color: #ccc;
        }
        .inner{
            vertical-align: middle;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="wrap">
        <img class="inner" src="12.jpg">
</div>
</body>
</html>

浮動元素水平居中

小提示：在不帶float的情況下,p元素的寬度會自動調整至最大化,而在帶float的情況下則正好相反,它會自動調整至最小化。
這裡是在不知道父元素和子元素寬度的情況下實現子元素的水平居中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>如何居中一個浮動元素</title>
        <style type="text/css">
        .p{
           position: relative;
            float: left;
            left:50%;
            border: 1px solid red;
        }
     .c{
            position: relative;
            float: left;
            right: 50%;
        }
        </style>
    </head>
    <body>
    <!-- 父元素和子元素同時左浮動，然後父元素相對左移動50%，再然後子元素相對右移動50%，或者子元素相對左移動-50%也就可以了。
    相對定位元素的定位是相對其正常位置。
    -->
    <div class="p">
    <h1 class="c">居中浮動元素</h1>
    </div>
    </body>
</html>

注意：絕對定位在佈局中可以很方便的解決很多問題，但是大多數時候都不去使用絕對定位，而是使用浮動等方法。而當需要 DOM 元素脫離當前文件流的時候才使用絕對定位。如：彈層，懸浮層等。

元素寬度未知實現居中

這裡父元素和子元素的寬度都不知道，並且要求子元素的寬度隨著其內容的增加而增加。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
    .wrap{
        border: 1px solid red;
    }
    .inner{
        background-color: blue;
        //設定子元素為行內塊元素
        display: inline-block;
        position: relative;
        left: 50%;
        transform: translate(-50%);
    }
    </style>
</head>
<body>
<div class="wrap">
        <div class="inner">我是一個可以改變寬度的div</div>
    </div>
</body>
</html>

三欄佈局(兩邊固定，中間自適應)

浮動實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浮動實現</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: red;
        float: left;
    }
    .right{
        width: 200px;
        height: 300px;
        background-color: blue;
        float: right;
    }
    .middle{
        margin: 0 210px;
        background-color: green;
        height: 300px;
    }
    </style>
</head>
<body>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
    <div class="middle">中間</div>
</body>
</html>

注意：這種實現方式要把middle這個div放到最後面。相當於先把兩邊的div佈局好，然後中間的div嵌入進去。

絕對定位實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>絕對定位實現</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
    }
    .right{
        width: 200px;
        height: 300px;
        background-color: blue;
        position: absolute;
        right: 0;
        top: 0;
    }
    .middle{
        margin: 0 210px;
        background-color: green;
        height: 300px;
    }
    </style>
</head>
<body>
    <div class="left">左邊</div>
    <div class="middle">中間</div>
    <div class="right">右邊</div>
</body>
</html>

注意：這種方式不要求將middle這個div放在最後面，放在任意位置都可以。

負margin值實現

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>負margin實現</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .left,.right{
          height: 300px;
                width: 200px;
                float: left;
    }
    .left{
        background-color: red;
        margin-left: -100%;
    }
    .right{
        background-color: blue;
        margin-left: -200px;
    }
    .middle{
        background-color: green;
        height: 300px;
        float: left;
        width: 100%;
    }
    </style>
</head>
<body>
    <div class="middle">中間</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</body>
</html>

CSS常見佈局總結

居中

元素水平居中

行內元素水平居中

塊元素水平居中

單行文字垂直居中

文字相對圖片、輸入框垂直居中

單行文字垂直居中

文字垂直居中

水平居中

垂直居中

CSS實現水平垂直居中

使用absolute

方法一

方法二

方法三

方法四—CSS3實現垂直水平居中

CSS3 flex實現元素的垂直居中

flex實現垂直水平居中

margin: auto–完美的居中

方法二

table-cell實現元素水平垂直居中

方法一

方法二

浮動元素水平居中

元素寬度未知實現居中

三欄佈局(兩邊固定，中間自適應)

浮動實現

絕對定位實現

負margin值實現

相關推薦