CSS居中問題：塊級元素和行級元素在水平方向以及垂直方向的居中問題

本文轉載自查看原文 2016-03-10 23:48 8565 HTML&CSS

元素的居中問題是每個初學者碰到的第一個大問題，在此我總結了下各種塊級行級水平垂直的居中方法，並盡量給出代碼實例。

塊級元素

塊級元素水平居中

1：margin: 0 auto

element {
   margin: 0 auto;
}

2：負邊距+絕對定位

.outside {
    width:500px;
    height:200px;
    background-color: red;
    margin:100px auto;
    position: relative;
}
.inner {
    width: 100px;
    height:50px;
    background-color: yellow;
    position: absolute;    //  絕對定位
    left:50%;              // +
    margin-left: -50px;      //  負邊距

3：彈性盒子flexbox：

.outside {
    width:500px;
    height:200px;
    background-color: red;
    margin:100px auto;
    position: relative;
    display: flex; // 父元素display:flex;
    justify-content: center;  // 主軸上居中對齊
}
.inner {
    background-color: yellow;
    height:100px;
    width: 50px;
}

塊級元素垂直居中（元素高度已知）：

1：利用負邊距+絕對定位

  .outside {
        width:720px;
        height: 720px;
        margin: 0 auto ; position: relative; /*祖先元素的非static定位*/
    } .inner { width: 350px; height: 350px; position: absolute; top: 50%; /*元素相對其最近的position屬性不為static的元素(祖先元素)移動50%，top、right、bottom 和 left 屬性指定定位元素的位置。*/ margin-top: -175px; /*元素向上移動自身的50%，此時，正好垂直居中*/
    }

2. 彈性盒子flexbox：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        .outside {
            width:300px;
            height: 200px;
            margin:100px auto;
            background-color: red;
            display: flex;            // 彈性盒子
            align-items: center;      // 彈性盒子
        }
        .inner {
            width:50px;
            height: 30px;
            background-color: yellow;
        }
    </style>
</head>
<body >
 <div class="outside">     
     <div class="inner">
         inner
     </div>
 </div>
</body>
</html>

3. 絕對定位+父元素position非static+子元素transform

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        .outside {
            width:300px;
            height: 200px;
            margin:100px auto;
            background-color: red;
            position: relative;              // 父元素非static
        }
        .inner {
            width:50px;
            height: 30px;
            background-color: yellow;
            position: absolute;
            top:50%;
            transform: translateY(-50%);    // 相對於自身高度，向上移動50%
        }
    </style>
</head>
<body >
 <div class="outside">     
     <div class="inner">
         inner
     </div>
 </div>
</body>
</html>

塊級元素垂直居中（元素高度未知）：

1. position:absolute + transform屬性

利用transform的translate()或translateY()方法

1 <!--Html 代碼-->
2 <div class="outside">
3     <div class="inner">
4     </div>
5 </div>

 1  /*Css 代碼*/
 2     .outside {
 3         background-color: #5555ee;
 4         width:720px;
 5         height: 720px;
 6         margin: 0 auto ;
 7         position:relative;
 8         
 9     }
10     .inner {
11         width: 350px;
12         height: 350px;
13         background-color: #ee5555;
14  position: absolute;
15  top:50%;/*相對祖先元素向下移動50%*/
16  transform: translateY(-50%);/*元素y軸移動自身的一半*/
17  transform: translate(,-50%);/*元素y軸移動自身的一半,與上一行效果相同*/
18     }

2 position:absolute + margin-top:auto + margin-bottom:auto

利用上邊距，下邊距在垂直方向的auto

<head>
    <style type="text/css">
     .outside {
         width: 300px;
         height: 300px;
         background-color: red;
         margin: 60px auto;
         position: relative;
     }
     .inside {
         width: 150px;
         height: 150px;
         background-color: black; position: absolute; 首先是父元素與子元素的position屬性值要“配套”好，這樣子元素的top,bottom才可以發揮應有的作用 top:30px; bottom:30px; 當垂直方向上的margin為auto時，不論是margin-left，margin-right,還是margin:auto, auto總是會試圖充滿整個父元素， margin: auto 4px; 30px,30px,auto的“配合”是此方法有效果的關鍵所在。子元素被要求拉伸到top:30px;bottom:30px;(兩個值必須一樣，這樣才居中)，但因為高度被固定而做不到這一點，所以margin:auto;就讓它居中了。
     } 
    </style>
</head>
<body>
    <div class="outside">
       <div class="inside"></div>
    </div>
</body>

3 flexbox彈性盒子

<!--Html 代碼-->
<div class="outside">
    <div class="inner">
    </div>
</div>

3.1 設置direction:row或是direction:columns

.outside {
    display: flex;
    flex-direction: column;
    /*主軸方向設為垂直方向*/
    justify-content: center;
    /*主軸方向上的元素的對齊方式*/
}
.outside {
    display: flex;
    flex-direction: row;
    /*默認主軸方向就是row*/
    align-items: center;
    /*交叉軸上的元素的對齊方式*/
}

3.2 目前來說最簡單的方法：

.outside {
    display: flex;
}

.inner {
    margin: auto;
}

二行級元素

水平居中：

    {
        text-align: 
    }

垂直居中：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css實現塊級元素水平垂直居中的方法？ CSS設置行內元素和塊級元素的水平居中、垂直居中 CSS設置行內元素和塊級元素的水平居中、垂直居中行內元素和塊級元素水平及垂直居中塊級元素的水平居中 CSS里的各種水平垂直居中基礎寫法心得分享（附內聯元素，塊級元素的基本概念） span(行級元素)在不定高的div(塊級元素)中垂直居中的方法讓多個塊級元素和行內元素一樣水平居中塊級元素水平，垂直居中的兩種方式讓div等塊級元素水平以及垂直居中的解決辦法