（史上最全）div居中的幾種方法

時間 2019-11-22

標籤史上 div 居中幾種方法欄目 CSS 简体版

原文原文鏈接

使div水平垂直居中

1. flex 佈局實現（元素已知寬度）

效果圖：web

內部 div 要有寬度bash

CSS 代碼:
<style>        
    .box{            
        width: 300px;            
        height: 300px;           
        background-color: #ccc; 
        display: flex;            
        display: -webkit-flex;            
        justify-content: center;            
        align-items: center;        
    }        
    .box .a{            
        width: 100px;            
        height: 100px;            
        background-color: blue;        
    }    
</style>
HTML 代碼：
<div class="box">        
    <div class="a"></div>    
</div>複製代碼

2. position （元素已知寬度）

父元素設置爲：position: relative;

子元素設置爲：position: absolute;

距上50%，據左50%，而後減去元素自身寬度的一半距離就能夠實現

效果圖：佈局

CSS代碼：
<style>        
    .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .a{            
        width: 100px;            
        height: 100px;            
        background-color: blue;            
        position: absolute;            
        left: 50%;            
        top: 50%;            
        margin: -50px 0 0 -50px;        
    }    
    </style>

HTML 代碼：
<div class="box">        
    <div class="a">love</div>    
</div>
複製代碼

3. position transform （元素未知寬度）

若是元素未知寬度，只需將上面例子中的 margin: -50px 0 0 -50px;替換爲： transform: translate(-50%,-50%);

效果圖：flex

CSS 代碼：
<style>        
    .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .a{            
        background-color: blue;            
        position: absolute;            
        top: 50%;            
        left: 50%;            
        transform: translate(-50%, -50%);        
    }    
</style>
複製代碼

4. position（元素已知寬度）（left，right，top，bottom爲0，maigin：auto ）

效果圖：spa

CSS 代碼：
<style>        
    .box{            
        width: 300px;            
        height: 300px;           
        background-color: red;            
        position: relative;        
    }        
    .box .a{            
        width: 100px;            
        height: 100px;            
        background-color: blue;            
        position: absolute;            
        top: 0;            
        bottom: 0;            
        left: 0;            
        right: 0;            
        margin: auto;        
    }    
</style>
HTML 代碼：
 <div class="box">        
    <div class="a">love</div>    
</div>
複製代碼

★第四種狀況方案中，若是子元素不設置寬度和高度，將會鋪滿整個父級（應用：模態框）

效果圖：3d

CSS 代碼：
<style>        
    .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .a{            
        /* 若是不設置寬高，將鋪滿整個父級*/            
        background-color: pink;            
        position: absolute;            
        left: 0;            
        right: 0;            
        top: 0;            
        bottom: 0;            
        margin: auto;            
        text-align: center;                    
    }    
</style>
HTML:
<div class="box">
    <div class="a">love</div>
</div>複製代碼

5. table-cell 佈局實現

table 實現垂直居中，子集元素能夠是塊元素，也能夠不是塊元素code

CSS：
<style>        
    .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        display: table-cell;            
        vertical-align: middle;                    
    }        
    .box .a{            
        margin-left: 100px;            
        width: 100px;            
        height: 100px;            
        background-color: blue;        
    }    
</style>

<div class="box">         
    <div class="a">love</div>    
</div>
複製代碼

使內容（文字，圖片）水平垂直居中（table-cell 佈局）

行元素 text-align ：center；orm

塊元素：margin ：0 auto；cdn

text-align : center  給元素的父級加，能夠使文本或者行級元素(例如：圖片)水平居中
line-height : 值爲元素的高度，能夠使元素的文本內容垂直居中
margin: 0 auto 使用條件：父級元素寬度無關緊要，子級元素必須使塊元素，並且要有寬度（不然繼承父級）複製代碼

display：table-cell 會使元素表現的相似一個表格中的單元格td，利用這個特性能夠實現文字的垂直居中效果。同時它也會破壞一些 CSS 屬性，使用 table-cell 時最好不要與 float 以及 position: absolute 一塊兒使用，設置了 table-cell 的元素對高度和寬度高度敏感，對margin值無反應，能夠響 padding 的設置，表現幾乎相似一個 td 元素。blog

小結：

1. 不要與 float：left， position : absolute，一塊兒使用

2. 能夠實現大小不固定元素的垂直居中

3. margin 設置無效，響應 padding 設置

4. 對高度和寬度高度敏感

5. 不要對 display：table-cell 使用百分比設置寬度和高度

應用：

1. 使文字水平垂直居中

效果圖：

CSS 代碼：
<style>        
    .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        display: table-cell;            
        text-align: center;/*使元素水平居中 */            
        vertical-align: middle;/*使元素垂直居中 */        
    }    
</style>

HTML 代碼：
<div class="box">love</div>
複製代碼

給父級設置 display : table，子集設置 display：tablecell ，子集會充滿全屏

CSS 代碼：
<style>        
    .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        display: table;        
    }        
    .box .a{            
        display: table-cell;            
        vertical-align: middle;            
        text-align: center;            
        background-color: blue;        
    }    
</style>

HTML ：
<div class="box">        
    <div class="a">love</div>    
</div>複製代碼

2. 圖片水平垂直居中

效果圖：

<style>        
    .box{            
        width: 300px;            
        height: 300px;            
        background-color: skyblue;            
        display: table-cell;            
        text-align: center;            
        vertical-align: middle;        
    }        
    img{            
        /* 設置成塊元素後，text-align：center 就會失效 */            
        width: 100px;            
        height: 100px;        
    }    
</style>

HTML：
<div class="box">    
    <img src="1.jpg" alt="">
</div>複製代碼

中間的圖片會隨着外層容器的大小而自動水平垂直居中，其實原理和文字水平垂直居中如出一轍

3. 元素兩端垂直對齊

CSS 代碼：
<style>        
    *{            
        padding: 0;            
        margin: 0;        
    }        
    .box{            
        display: table;            
        width: 90%;            
        margin: 10px  auto;            
        padding: 10px;             
        border: 1px solid green;            
        height: 100px;        
    }        
    .left,.right{            
        display: table-cell;                        
        width: 20%;            
        border: 1px solid red;                 
    }        
    .center{            
        /* padding-top: 10px; */            
        height: 100px;            
        background-color: green;        
    }    
</style>

HTML：
<div class="box">        
    <div class="left">            
        <p>我是左邊</p>        
    </div>        
    <div class="center">            
        <p>我是中間</p>       
    </div>        
    <div class="right">            
        <p>我是右邊</p>        
    </div>    
</div>
複製代碼

效果：

其中 center 的頂部沒有與左右兩側對齊，緣由是 left 中的 <p> 有一個 margin-top ，而表格佈局中默認是文字頂部對齊的，因此 center 會向下移動到首行文字基線對齊，解決辦法是爲 center 添加與左右兩側中 margin-top 較大者等值的 padding-top 便可。