前言：

? ?這一篇主要是翻譯 《how-to-center-anything-with-css》這一篇文章的主要內(nèi)容，再加上自己的一些概括理解；主要問題是解決垂直居中的問題。我們知道實現(xiàn)水平居中的方式很多種，比如：

text-align:center; margin:0 auto;

等等都可以實現(xiàn)最基本的水平居中，但是對于垂直居中好像就不是很熟悉了，我們先來看看這篇譯文講的是什么，順便穿插一些其他總結(jié)的居中方法于其中。

?

?

最近，我們深入探討了CSS布局背后的核心概念，并探討了絕對和相對定位之間的差異。 我們將使用另一個CSS布局談話，這一次基于一個根本問題，幾乎每個新的開發(fā)人員問：你如何實現(xiàn)居中？

有一堆不同類型的web元素和布局情況，每個都需要一個獨特的解決方案來定中心（垂直和水平）。 今天，我們將討論一系列這些場景，這樣你就可以圍繞他們的工作原理，帶滿信心去實現(xiàn)一切居中問題！

?

這個是為了什么？

我最近得到了許多掙扎于CSS的布局的基本方法和概念的設(shè)計者的評論反饋。 許多剛接觸CSS的設(shè)計者普遍的共識是，他們只是撥弄代碼，直到一切符合他們所需要的效果。

我自己也經(jīng)歷過這段時期，我知道這是你的專業(yè)成長過程中一個非常令人沮喪的時期。 知道答案是正確的在你面前，沒有能夠弄清楚是令人討厭和耗時。

如果這聽起來很熟悉，希望我可以幫助緩解你在這個時期有一些堅實和實用的建議，如何處理一些常見的布局場景。 如果你是一個熟練CSS甚至于可以隨手閉上眼睛都可以編寫適合CSS代碼的高手，那么這篇文章可能不適合你。 如果你是一個設(shè)計師，只是想更好地了解如何把你的Photoshop文件中的什么，把它變成CSS，那么這篇文章很適合你。 讓我們開始吧。

?

使一個元素水平居中

第一個場景是最常見的一個場景：

? ? 在視口或瀏覽器窗口中水平放置元素。 要開始，讓我們突破一個簡單的div，并給它一些基本的樣式。

?

　　　　　　　　

?方案一

? ? ? ?我們需要做的是利用可以應(yīng)用于margin 的“auto ”值。?

　　　　?

缺點：

必須記在腦里的一些事情

　　首先，你必須為你居中的元素聲明一個特定的寬度。 高度聲明不是必需的，您可以允許內(nèi)容根據(jù)需要確定高度，這是默認(rèn)設(shè)置，但必須始終設(shè)置寬度。

重要的是要注意，雖然這個技巧將適用于大多數(shù)塊級元素，而不僅僅是div，它不會幫助你實現(xiàn)垂直居中。

方案二

使一個絕對定位的元素居中

上面的方法可以自動將一個項目集中在另一個項目中，但是該方法假設(shè)您使用默認(rèn)定位上下文：static。 如果應(yīng)用了絕對定位，此方法將退出窗口。

使用我們上周學(xué)習(xí)的絕對和相對定位方法，我們可以應(yīng)用一個簡單的公式來解決這個問題。

　　　　

1 .container { 2 height: 300px; 3 width: 300px; 4 background: #eee; 5 margin: 10px auto; 6 position: relative; 7 } 8 9 .box { 10 height: 100px; 11 width: 100px; 12 background: #222; 13 position: absolute; 14 left: 100px; 15 }

?

使用這段代碼，我們將盒子的左邊和父容器的邊緣之間的距離設(shè)置為（300-100）/2=100px,實現(xiàn) 子元素的水平居中

缺點：

? 這種方法僅在父容器具有靜態(tài)寬度時有效。?必須事先聲明父元素和子元素的寬度，對于流式布局，響應(yīng)式寬度不起作用

方案三

　　考慮到響應(yīng)式設(shè)計的普及，越來越多的容器最近流行的路線。 這意味著，我們需要另一種方法來使孩子居中，而不依賴于父節(jié)點的寬度。

　　為了實現(xiàn)這一點，我們需要使用左值的百分比。 顯而易見的答案是使用50％，但是這不會真正工作，因為你不是占位元素的寬度。 為了使它工作，我們需要添加一個 負(fù)的?margin-left ?的子元素的寬度的一半。

1 .container {2 height: 300px;3 width: 70%;4 background: #eee;5 margin: 10px auto;6 position: relative;7 }8 9 .box { 10 height: 100px; 11 width: 100px; 12 background: #222; 13 position: absolute; 14 15 /*Centering Method 2*/ 16 margin: 0px 0 0 -50px; 17 left: 50%; 18 }

?

重要的是要注意，如果我們的孩子元素有流體寬度，這也將工作。 我們使用與以前相同的步驟，并提出類似以下內(nèi)容：

1 .container { 2 height: 300px; 3 width: 70%; 4 background: #eee; 5 margin: 10px auto; 6 position: relative; 7 } 8 9 .box { 10 height: 100px; 11 width: 70%; 12 background: #222; 13 position: absolute; 14 15 /*Centering Method 2*/ 16 margin: 0px 0 0 -35%; /* Half of 70% /* 17 left: 50%; 18 }

?

【注：因為margin的百分比 和子元素的寬度百分比都是根據(jù)父元素的寬度來決定的】

方案四 ?

inline-block不僅可以用來代替float，并且可以使用inline-block來實現(xiàn)元素的居中效果，技巧，使父元素 text-align:center;

下面的例子使得ul列表下的li居中顯示

1 ul { 2 list-style: none outside none; 3 padding: 10px; 4 background: green; 5 text-align: center; 6 } 7 ul li { 8 display: inline-block; 9 10 /* 兼容IE 6,7 */ 11 *display: inline; 12 zoom: 1; 13 14 background: orange; 15 padding: 5px; 16 }

?

?

?

使一個元素完全居中

現(xiàn)在我們已經(jīng)有了幾個簡單而復(fù)雜的居中方法，現(xiàn)在是時候處理元素水平和垂直的完全居中問題了

幸運的是，要解決這個問題，我們可以使用我們剛才學(xué)到的方法，我們只需要考慮高度。 這一次，我們也將垂直和水平地同時居中父元素和子元素。

?

方案一：

借鑒絕對定位的水平居中方法，如法炮制，我們可以利用top值實現(xiàn)垂直居中

.container {height: 300px;width: 300px;background: #eee;position: absolute;margin: -150px 0 0 -150px;left: 50%;top: 50%; }.box {height: 100px;width: 100px;background: #222;position: absolute;/*Centering Method 2*/margin: -50px 0 0 -50px;left: 50%;top: 50%; }

方案二 ?利用flex布局

? align-items ?實現(xiàn)垂直居中

? justify-content ?實現(xiàn)水平居中

.box{width:300px;height:400px;border:1px solid pink;display:flex;align-items:center;justify-content:center;}

方案三?使用transform實現(xiàn)

代替使用負(fù)的 margin值, 我們可以使用負(fù)的 translate() transforms屬性，這種方式可以不需要事先聲明子元素的寬度和高度

?

.container {position:relative;height: 200px;width: 400px;background: #eee;margin: 150px auto; } .center {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 40%;height: 40%;background:red; }

使文字居中

?對于我的下一個技巧，我會教你一些關(guān)于文本的居中方法。 我們將從容器div中的一個簡單的h1元素開始

　　　　　　

　　　　　　　　　　　　　　　　　　　

?

方案一

使用 text-align 屬性

1 .container { 2 height: 400px; 3 width: 400px; 4 background: #eee; 5 margin: 50px auto; 6 } 7 8 h1 { 9 font: 40px/1 Helvetica, sans-serif; 10 text-align: center; 11 }

?

容易嗎？ 但現(xiàn)在讓我們說，我們要垂直居中這行文本。 如果這是一個段落，我們可能會考慮上面的方法，但由于它只有一行，我們可以使用一個漂亮的把戲。

我們所要做的就是將line-height屬性設(shè)置為容器的高度。 我使用縮寫字體語法完成了以下。

.container {height: 200px; /*Set line-height to this value*/width: 400px;background: #eee;margin: 150px auto; }h1 {font: 40px/200px Helvetica, sans-serif;text-align: center; }

?

效果圖?

?

缺點：

? ? 只對于單行文字起作用

?關(guān)于文字的問題，還可以參考這篇博文 《CSS如何實現(xiàn)“一行水平居中，而兩行就左對齊》

　　　　　

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

總結(jié)

以上是生活随笔為你收集整理的如何使用CSS实现居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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