【前端攻略】最全面的水平垂直居中方案與flexbox布局 原文:【前端攻略】最全面的水平垂直居中方案與flexbox布局

最近又遇到許多垂直居中的問題，這是Css布局當(dāng)中十分常見的一個(gè)問題，諸如定長(zhǎng)定寬或不定長(zhǎng)寬的各類容器的垂直居中，其實(shí)都有很多種解決方案。而且在Css3的flexbox出現(xiàn)之后，解決各類居中問題變得更加容易了。搜了搜園子內(nèi)關(guān)于flexbox的文章覺得很多不夠詳盡，故想借介紹flexbox的同時(shí)好好總結(jié)一番各類垂直居中的方法。由簡(jiǎn)至繁：

?

行內(nèi)元素的水平居中 ? ?

要實(shí)現(xiàn)行內(nèi)元素（<span>、<a>等）的水平居中，只需把行內(nèi)元素包裹在塊級(jí)父層元素（<div>、<li>、<p>等）中，并且在父層元素CSS設(shè)置如下：

#container{text-align:center; }

并且適用于文字，鏈接，及其inline或者inline-block、inline-table和inline-flex。

Demo?

?

塊狀元素的水平居中 ? ?

要實(shí)現(xiàn)塊狀元素（display:block）的水平居中，我們只需要將它的左右外邊距margin-left和margin-right設(shè)置為auto，即可實(shí)現(xiàn)塊狀元素的居中，要水平居中的塊狀元素CSS設(shè)置如下：

#center{margin:0 auto; }

Demo

?

多個(gè)塊狀元素的水平居中 ? ?

要實(shí)現(xiàn)多個(gè)水平排列的塊狀元素的水平居中，傳統(tǒng)的方法是將要水平排列的塊狀元素設(shè)為display:inline-block，然后在父級(jí)元素上設(shè)置text-align:center，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。

#container{text-align:center; }#center{display:inline-block; }

Demo

??

使用flexbox實(shí)現(xiàn)多個(gè)塊狀元素的水平居中

在使用之前，首先介紹一下flexbox。

Flexbox布局（Flexible Box)模塊旨在提供一個(gè)更加有效的方式制定、調(diào)整和分布一個(gè)容器里的項(xiàng)目布局，即使他們的大小是未知或者是動(dòng)態(tài)的。是CSS3 中一個(gè)新的布局模式，為了現(xiàn)代網(wǎng)絡(luò)中更為復(fù)雜的網(wǎng)頁需求而設(shè)計(jì)。

Flexbox 已經(jīng)被瀏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ，firefox18+已經(jīng)支持了本文中所描述的 Flexbox。

　　

學(xué)會(huì)使用flexbox

要為元素設(shè)置flexbox布局，只需將display屬性值設(shè)置為flex。

#container {display: flex; }

flexbox的默認(rèn)為一個(gè)塊級(jí)元素，如果需要定義為一個(gè)行內(nèi)級(jí)的元素，同理：

#container {display: inline-flex; }

flexbox由伸縮容器和伸縮項(xiàng)目組成。通過設(shè)置元素的display屬性為flex或者inline-flex可以得到一個(gè)伸縮容器。設(shè)置為flex的容器被渲染為一個(gè)塊級(jí)元素，而設(shè)置為inline-flex的容器則渲染為一個(gè)行內(nèi)元素。而每一個(gè)被設(shè)置為flex的容器，它的內(nèi)部元素都將變成一個(gè)flex項(xiàng)目，即是一個(gè)伸縮項(xiàng)目。簡(jiǎn)單的說，flex 定義了伸縮容器內(nèi)伸縮項(xiàng)目該如何布局。

回到正題，利用flexbox實(shí)現(xiàn)多塊狀元素的水平居中，只需要將父級(jí)容器的Css設(shè)置如下：

#container{justify-content:center;display:flex; }

Demo

??

已知高度寬度元素的水平垂直居中 ? ?

法一 絕對(duì)定位與負(fù)邊距實(shí)現(xiàn)

利用絕對(duì)定位，將元素的top和left屬性都設(shè)為50%，再利用margin邊距，將元素回拉它本身高寬的一半，實(shí)現(xiàn)垂直居中。核心CSS代碼如下：

#container{position:relative;}#center{width:100px;height:100px;position:absolute;top:50%;left:50%;margin:-50px 0 0 -50px;}

Demo

??

法二?絕對(duì)定位與margin

這種方法也是利用絕對(duì)定位與margin，但是無需知道被垂直居中元素的高和寬。核心代碼如下：

#container{position:relative;}#center{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;}

（同上故不再截圖）

Demo

??

未知高度和寬度元素的水平垂直居中 ? ?

法一. ?當(dāng)要被居中的元素是inline或者inline-block元素

當(dāng)要被居中的元素是inline或者inline-block的時(shí)候，可以巧妙的將父級(jí)容器設(shè)置為display:table-cell，配合text-align:center和vertical-align:middle即可以實(shí)現(xiàn)水平垂直居中。

核心代碼如下：

#container{display:table-cell;text-align:center;vertical-align:middle; }#center{}

Demo

??

法二. Css3顯威力

利用Css3的transform，可以輕松的在未知元素的高寬的情況下實(shí)現(xiàn)元素的垂直居中。

核心代碼如下：

#container{position:relative;}#center{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

Demo

??

法三. flex布局輕松解決

使用flex布局，無需絕對(duì)定位等改變布局的操作，可以輕松實(shí)現(xiàn)元素的水平垂直居中。

核心代碼如下：

#container{display:flex;justify-content:center;align-items: center; }#center{}

Demo

??

總結(jié) ? ?

CSS3的transform和flex固然好用，但在項(xiàng)目的實(shí)際運(yùn)用中必須考慮兼容問題，大量的hack代碼可能會(huì)導(dǎo)致得不償失。

某些瀏覽器仍需使用前綴寫法:

.flexboxtest{display: flex;display: -webkit-flex; //Safari仍舊需要使用特定的瀏覽器前綴 }

瀏覽器對(duì)最新版本的flexbox 的支持情況如下：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with?-webkit-)

?

文中介紹的flex用法只是一小部分，flex還有著其他強(qiáng)大的功能。本文主要介紹水平垂直居中的方法，具體的flex教學(xué)，可以移步：圖解CSS3 Flexbox屬性

原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

posted on 2019-03-08 13:35 NET未來之路 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/10495254.html

總結(jié)

以上是生活随笔為你收集整理的【前端攻略】最全面的水平垂直居中方案与flexbox布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。