css實現水平/垂直居中效果

Ilikewhite 發布于2019-08-30 11:14 / 1963人閱讀

摘要：一如果是已知寬高的元素做水平垂直居中效果的話，可以直接用具體的數值指定定位布局或偏移布局，這個就不過多討論。這里主要介紹在不知寬高或需要彈性布局下的幾種實現方式。

一、如果是已知寬高的元素做水平/垂直居中效果的話，可以直接用具體的數值指定定位布局或偏移布局，這個就不過多討論。這里主要介紹在不知寬高或需要彈性布局下的幾種實現方式。

二、
1.table表格法
思路：顯示設置父元素為：table，子元素為：cell-table，vertical-align: center
優點：父元素（parent）可以動態的改變高度（table元素的特性）
缺點：IE8以下不支持
代碼實現：

.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: red;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}



    
        hello world-1

效果：

2.空元素法
思路：使用一個空標簽span設置他的vertical-align基準線為中間，并且讓他為inline-block，寬度為0
缺點：多了一個沒用的空標簽，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。當然也可以使用偽元素來代替span標簽，不過IE支持也不好




    
        
        hello world-2

效果：

3.-50%定位法
思路：子元素絕對定位，距離頂部 50%，左邊50%，然后使用css3 transform:translate(-50%; -50%)
優點：高大上,可以在webkit內核的瀏覽器中使用
缺點：不支持IE9以下不支持transform屬性

代碼實現




        hello world-3

效果：

4.思路：使用css3 flex布局法
優點：簡單快捷
缺點：低端pc瀏覽器和低版本的安卓設備不支持，不過現在應該很少用了

代碼實現：


 
        hello world-4

效果：

5.絕對定位法
思路：父元素使用定位（相對/絕對都行），子元素設置position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;
優點：兼容性好，父元素寬高可變，使用非常靈活，在做全屏居中的時候很好
缺點：子元素還是要指定寬高，可以用百分比

代碼實現

.parent5{
    position:absolute;
    width: 300px;
    height:300px;
    background: red;
}
.parent5 .child{
    color:#fff;
    margin: auto;
    position:absolute;
    top:0;
    left:0;
      right:0;
      bottom:0;
      text-align:center;
      width:50%;
    height:20%;
}

 
        hello world-5

效果：

三、在追逐性能時代，現在基本都是webkit內核了，擁抱css3彈性布局，個人比較推薦用4、5方法，4.flex布局法適合在局部使用。5.絕對定位法適合在全屏場景使用，比如彈框中。

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

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

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

【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 評論0 收藏0
CSS垂直居中，你會多少種寫法？

摘要：如果我們直接可以計算出正確的和值，豈不是一次到位函數正有此功能，當然我們需要知道子元素的寬高效果是一個作用于內聯元素的屬性。內聯元素的特性是會和其它內聯元素或者文字在同一行顯示，但是默認情況下是與父元素基線對齊的。 ??CSS控制居中是前端開發中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。??談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于H...

caohaoyu 2019-08-29 18:43 評論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
對css居中的一點總結

摘要：為了更好的加深對居中的理解，搜集和閱讀相關資料，發現不錯的文章將其整理出來。在學習前端的過程中，發現元素和文本的水平居中和垂直居中，是經常會出現的問題，在實際工作中也會經常碰到。居中的技巧有很多，但在編寫代碼的過程中，發現有時候技巧管用，有時候不管用，于是就將每個知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認識不夠深入，只是停留在實現需求的水平上。為了更好的加深對居中的...

BenCHou 2019-08-29 11:17 評論0 收藏0