CSS - 垂直水平居中方法

用戶83 發(fā)布于2019-08-30 15:43 / 858人閱讀

摘要：參考鏈接整理搬運(yùn)垂直水平居中方法，區(qū)分內(nèi)聯(lián)元素與塊級元素垂直居中和水平居中原用讓一個(gè)容器水平垂直內(nèi)聯(lián)元素居中方法水平居中設(shè)置行內(nèi)元素設(shè)置布局設(shè)置靈活運(yùn)用垂直居中設(shè)置父元素高度確定的單行文本內(nèi)聯(lián)元素，垂直居中設(shè)置父元素高度確定的多行文本

參考鏈接

整理搬運(yùn)css垂直水平居中方法，區(qū)分內(nèi)聯(lián)元素與塊級元素

CSS垂直居中和水平居中

【原】用css讓一個(gè)容器水平垂直

內(nèi)聯(lián)元素居中方法

水平居中設(shè)置:

行內(nèi)元素設(shè)置 text-align:center;

Flex布局設(shè)置display:flex;justify-content:center;(靈活運(yùn)用)

垂直居中設(shè)置：

父元素高度確定的單行文本（內(nèi)聯(lián)元素），垂直居中：

設(shè)置 height = line-height；

父元素高度確定的多行文本（內(nèi)聯(lián)元素），垂直居中：

先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle；

如果在塊級元素中包裹有多個(gè)行內(nèi)元素，其中某個(gè)元素比較特殊，比如：大寫加粗的文字、圖片圖標(biāo)，垂直居中：

該元素設(shè)置 { vertical-align: middle; }
/* 同時(shí)對應(yīng) text-bottom/text-top 為下對齊/上對齊 */

塊級元素居中方法

移動(dòng)端，選用方法六和方法七，支持不定寬高的情況
PC端，要考慮兼容性的話，可以選用方法四
PC端，如果中間的元素高度不固定，可以選用方法五

方法一：position加margin
兼容性：主流瀏覽器均支持，IE6不支持



    


/**css**/
.wrap {
    position: relative;
    width: 200px;
    height: 200px;
    background: pink;
}
.wrap .content{
    position: absolute;
    width: 100px;
    height: 100px;
    background: skyblue;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

方法二： diaplay:table-cell
兼容性：由于display:table-cell的原因，IE67不兼容



     


/*css*/
.wrap{
    width: 200px;
    height: 200px;
    background: pink;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.content{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background: skyblue;
}

方法三：position加 transform
兼容性：ie9以下不支持 CSS3新屬性transform，移動(dòng)端表現(xiàn)較好



    


/* css */
.wrap {
    position: relative;
    background: pink;
    width: 200px;
    height: 200px;
}
.content{
    position: absolute;
    background: skyblue;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width: 100px;
    height: 100px;
}

方法四：position（固定寬高）
兼容性：適用于所有瀏覽器



   


/* css */
.wrap {
    background: pink;
    width: 200px;
    height: 200px;
    position: relative;
}
.content{
    background: skyblue;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-left:-50px;
    margin-top:-50px;
}

方法五：兼容低版本瀏覽器，不固定寬高



    
        不固定寬高，自適應(yīng)
    


/*css*/
.table {
    height: 200px;/*高度值不能少*/
    width: 200px;/*寬度值不能少*/
    display: table;
    position: relative;
    float:left;
    background: pink;
}      

.tableCell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
    *position: absolute;
    padding: 10px;
    *top: 50%;
    *left: 50%;
}
.content {
    *position:relative;
    *top: -50%;
    *left: -50%;
     background: skyblue;
}

方法六：flex;align-items: center;justify-content: center
適合移動(dòng)端



    


/* css */
.wrap {
    background: pink;
    width: 200px;
    height: 200px;
    display: flex; 
    /*垂直居中*/
    align-items: center; 
    /*水平居中*/
    justify-content: center;
}
.content{
    background: skyblue;
    width: 100px;
    height: 100px;
}

方法七：display:flex;margin:auto
適合移動(dòng)端



   


/* css */
.wrap {
    background: pink;
    width: 200px;
    height: 200px;
    display: flex; 
}
.content{
    background: skyblue;
    width: 100px;
    height: 100px;
    margin: auto;
}