CSS - 垂直水平居中方法

用戶83 發布于2019-08-30 15:43 / 865人閱讀

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

參考鏈接

整理搬運css垂直水平居中方法，區分內聯元素與塊級元素

CSS垂直居中和水平居中

【原】用css讓一個容器水平垂直

內聯元素居中方法

水平居中設置:

行內元素設置 text-align:center;

Flex布局設置display:flex;justify-content:center;(靈活運用)

垂直居中設置：

父元素高度確定的單行文本（內聯元素），垂直居中：

設置 height = line-height；

父元素高度確定的多行文本（內聯元素），垂直居中：

先設置 display:table-cell 再設置 vertical-align:middle；

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

該元素設置 { vertical-align: middle; }
/* 同時對應 text-bottom/text-top 為下對齊/上對齊 */

塊級元素居中方法

移動端，選用方法六和方法七，支持不定寬高的情況
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，移動端表現較好



    


/* 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;
}

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



    
        不固定寬高，自適應
    


/*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
適合移動端



    


/* 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
適合移動端



   


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

云服務器 GPU云服務器水平垂直居中垂直居中實現垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116021.html

CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分為行內元素水平居中和塊級元素水平居中行內元素水平居中這里行內元素是指文本圖像按鈕超鏈接等，只需給父元素設置即可實現。 1、水平居中水平居中可分為行內元素水平居中和塊級元素水平居中 1.1 行內元素水平居中這里行內元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設置text-align:center即可實現。 .center{ te...

scwang90 2019-08-30 14:19 評論0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分為行內元素水平居中和塊級元素水平居中行內元素水平居中這里行內元素是指文本圖像按鈕超鏈接等，只需給父元素設置即可實現。 1、水平居中水平居中可分為行內元素水平居中和塊級元素水平居中 1.1 行內元素水平居中這里行內元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設置text-align:center即可實現。 .center{ te...

Lsnsh 2019-08-02 10:04 評論0 收藏0
【第1期】聊聊css居中那點事

摘要：前言居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實現居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。前言：居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點事。我們主要從這幾個方面來了解下居中：水平居中垂直居中水平垂直居中水平...

劉永祥 2019-08-30 15:55 評論0 收藏0
主流的CSS水平和垂直居中技術大全

摘要：水平居中行內元素的水平居中在父元素中設置只對內聯元素或行內塊元素有效需要放置于父元素中塊級元素的水平居中只對塊級元素有效指的是自適應寬度。參考張鑫旭實現絕對定位元素的居中及原理居中方式水平居中垂直居中塊級元素設置內聯元素設置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個月也零零散散學...

KoreyLee 2019-08-29 16:26 評論0 收藏0