如何使用CSS實現居中

前言：

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

text-align:center;

margin:0 auto;

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

?

?

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

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

?

這個是為了什么？

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

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

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

?

使一個元素水平居中

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

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

?

　　　　　　　　

?方案一

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

　　　　?

缺點：

必須記在腦里的一些事情

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

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

方案二

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

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

使用我們上周學習的絕對和相對定位方法，我們可以應用一個簡單的公式來解決這個問題。

　　　　

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  margin: 10px auto;
  position: relative;
}

.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
  left: 100px;
}

?

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

缺點：

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

方案三

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

　　為了實現這一點，我們需要使用左值的百分比。 顯而易見的答案是使用50％，但是這不會真正工作，因為你不是占位元素的寬度。 為了使它工作，我們需要添加一個 負的?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 }

?

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

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}

.box {
  height: 100px;
  width: 70%;
  background: #222;
  position: absolute;
  
  /*Centering Method 2*/
  margin: 0px 0 0 -35%; /* Half of 70% /*
  left: 50%;
}

?

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

方案四 ?

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

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

ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
}
ul li {
  display: inline-block;

  /* 兼容IE 6,7 */
  *display: inline;
  zoom: 1;

  background: orange;
  padding: 5px;
}

?

?

?

使一個元素完全居中

現在我們已經有了幾個簡單而復雜的居中方法，現在是時候處理元素水平和垂直的完全居中問題了

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

?

方案一：

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

.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布局

1. ? align-items ?實現垂直居中
2. ? justify-content ?實現水平居中

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

方案三?使用transform實現

代替使用負的 margin值, 我們可以使用負的 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;
}

使文字居中

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

　　　　　　

　　　　　　　　　　　　　　　　　　　

?

方案一

使用 text-align 屬性

.container {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: 50px auto;
}

h1 {
  font: 40px/1 Helvetica, sans-serif;
  text-align: center;
}

?

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

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

.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;
}

?

效果圖?

?

缺點：

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

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