如何使用CSS實現置中

標籤：hot   target   font   bsp   toolbar   https   基於   tar   情況   

前言：

   這一篇主要是翻譯 《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。 如果應用了絕對位置，此方法將退出視窗。

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

　　　　

 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 }

 

使用這段代碼，我們將盒子的左邊和父容器的邊緣之間的距離設定為（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 }

 

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

 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的百分比 和子項目的寬度百分比都是根據父元素的寬度來決定的】

 

使一個元素完全置中

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

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

 

方案一：

借鑒絕對位置的水平置中方法，如法炮製，我們可以利用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 屬性

 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 }

 

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

我們所要做的就是將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如何?“一行水平置中，而兩行就靠左對齊》

　　　　　

如何使用CSS實現置中