CSS水平或垂直居中技巧

時間  2019-11-06
標籤 css 水平 垂直 居中 技巧 欄目 CSS 简体版
原文   原文鏈接

前言

css水平和垂直居中是一個亙古不變的話題，它經常出如今優美的網頁上以及各大前端面試當中。說來慚愧，在兩年前面試的時候，我徹底不知道如何作到水平和垂直均居中的方法，那場面別提有多尷尬了（ps：特想找個地洞鑽進去）。。。時隔兩年，對於這個問題算是有一些瞭解了，現作個小小的整理，也算是對本身學習的總結。css

注：文中例子沒寫明html代碼時，使用的是下面結構：html

<div class="example example14">
    <div class="con">
        超級好用超級放心    
        <a href="https://tinypng.com/" target="_blank">在線壓縮圖片</a>
        <span>壓縮完能夠 </span> 
    </div>
</div>

只是類名會有所不一樣。前端

一、Line-height

適用情景：單行文字（垂直居中）
原理：將單行文字的行高設定後，文字會位於行高的垂直中間位置。
html：css3

<div class="example">Lorem ipsam.</div>

css：面試

.example{
    width: 400px;
    background: #afddf3;
    line-height: 50px;
}

效果：
在這裏插入圖片描述瀏覽器

二、Line-height + inline-block

原理：將多個元素或多行元素當成一個行元素來看待，因此咱們必需要將這些數據多包一層，並將其設定爲inline-block。因爲inline-block在不一樣瀏覽器會有空隙產生，所以設定父元素font-size：0來消除，從而達到完美的垂直居中。
css：ide

.example2{
    width: 400px;
    border: 1px solid #dcdcdc;
    line-height: 100px;
    font-size: 0;
}
.example2 .con {
    display: inline-block;
    line-height: 2;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

三、:before + inline-block

原理：:before 僞類元素搭配 inline-block 屬性的寫法應該是很傳統的垂直居中的技巧了，此方式的好處在於子元素居中能夠不須要特別設定高度，咱們將利用:before僞類元素設定爲100%高的inline-block，再搭配上將須要居中的子元素一樣設置成inline-block性質後，就能使用vertical-align: middle來達到垂直居中的目的了，此方式在以往實際上是個很是棒的垂直居中解決方案，惟獨須要特別處理掉inline-block元素之間的4-5px空間這個小缺陷，不用怕，設置父元素font-size: 0，子元素font-size: 15px便可。
css:佈局

.example3 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example3::before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.example .con {
    width: 300px;
    font-size: 15px;
    background: #afddf3;
    display: inline-block;
    vertical-align: middle;
}

在這裏插入圖片描述

四、table + margin

適用情景：單對象（水平居中）
原理：將子元素設置塊級表格，再設置水平居中。
css:學習

.example4 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table;
    margin: 0 auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

五、table + table-cell + vertical-align: middle

適用情景：多對象（垂直居中）
html:flex

<div class="example example5">
    <div class="con">
        超級好用超級放心    
        <a href="https://tinypng.com/" target="_blank">在線壓縮圖片</a>
        <span>壓縮完能夠打包下載哦 </span> 
    </div>
    <div class="con">
        CSS-TRICKS
    </div>
</div>

css:

.example5 {
    display: table;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

六、absolute + margin 負值

原理：設置絕對定位，top: 50%;後，再設置高度一半的負值實現。說來講去，這就是一道簡單的數學題而已。
缺陷：須要設置居中元素的高度。
優點：無瀏覽器兼容性問題
css:

.example6 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example6 .con {
    position: absolute;
    top: 50%;
    height: 80px;
    margin-top: -40px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

七、absolute + margin auto

原理：當元素設置爲絕對定位後，假設它是抓不到總體可運用的空間範圍，因此margin: auto會失效，但當你設置了top:0;bottom:0;時，絕對定位元素就抓到了可運用的空間了，這時你的margin:auto就生效了。
缺陷：定位元素必須有固定的寬高（百分比也算）。
css:

.example7 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example7 .con {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

八、absolute + translate

原理：利用絕對定位時的top 與right設置元素的上方跟左方各爲50%，再利用transform: translate(-50%, -50%);位移居中元素自身寬與高的50%就能達成居中的目的了。
缺陷：translate是css3屬性，低版本瀏覽器不支持。
顯著優點：無需固定定位元素的寬高。
css:

.example8 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example8 .con {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

九、Flex + align-items

適用情景：多行文字（垂直居中）
原理：彈性佈局，align-items定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式，參考CSS-TRICKS
缺陷：css3屬性，低版本瀏覽器不支持。
顯著優點：無需固定定位元素的寬高，代碼乾淨利索。
css:

.example9 {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example9 .con {
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

十、Flex + justify-content

適用情景：多行文字（水平居中）
原理：彈性佈局，justify-content設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，參考CSS-TRICKS
缺陷：css3屬性，低版本瀏覽器不支持。
顯著優點：無需固定定位元素的寬高，代碼乾淨利索。
css:

.example10 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    height: 80px;
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

十一、Flex + :before + flex-grow

適用情景：多行文字（垂直居中）
原理：彈性佈局，Flex-direction：column;將項目垂直顯示，正如一個列同樣。flex-grow: [number];規定項目將相對於其餘靈活的項目進行擴展的量，參考CSS-TRICKS
缺陷：css3屬性，低版本瀏覽器不支持，而且難度稍大，通常不會想到這種方法。
顯著優點：無需固定定位元素的寬高
css:

.example11 {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example11:before {
    content: '';
    flex-grow: .5;
}
.example11 .con {
    font-size: 15px;
    background: #afddf3;
}

十二、Flex + margin

缺陷：css3屬性，低版本瀏覽器不支持。
css:

.example12 {
    display: flex;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example12 .con {
    margin: auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

1三、Flex + align-self

原理：align-self定義flex子項單獨在側軸（縱軸）方向上的對齊方式。
缺陷：css3屬性，低版本瀏覽器不支持。
css:

.example13 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example13 .con {
    align-self: center;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

1四、Flex + align-content

原理：align-content在彈性容器內的各項沒有佔用交叉軸上全部可用的空間時對齊容器內的各項（垂直），彈性項目有多項此屬性纔會發揮做用。
缺陷：css3屬性，低版本瀏覽器不支持。
css:

.example14 {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example14:before, .example14:after {
    content: "";
    display: block;
    width: 100%;
}
.example14 .con {
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

在這裏插入圖片描述

下面是一個比較常見的例子,每每是不想讓圖片發生變形而且無論尺寸大小均會顯示在容器的正中央（如下例子應用的是第8條）。
html:

<div class="imgbox-box">
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
</div>

css:

.imgbox-box {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.imgbox {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ebf8ed;
    overflow: hidden;
}
.imgbox img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

在這裏插入圖片描述

結語：有些是水平居中，有些是垂直居中，將它們某兩個合在一塊兒就能實現水平和垂直均居中。不過我相信確定不止這些方法，還有其餘的值得咱們去探究。若文中有錯，請你們指正，謝謝！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程