2. 程式人生 > >CSS垂直居中24法

CSS垂直居中24法

阿新 • • 發佈：2018-11-06

今天看到一篇神文，講解了23中垂直居中的方法，現在自己參照原文進行每一種方法的詳細講解。

以下是所有例子中的公共CSS部分

		*{
	      margin: 0;
	      padding: 0;
	    }   
	    h2{text-align: center;}
		.flex{
			display: flex;
		}
		.grid{display: grid;}
		.box{			
			border: 1px solid red;
			width: 80%;
			height: 150px;
			margin: auto;
		}
		.content{			
			width: 400px;
			background-color: #ccc;			
		}
		.margin-auto{margin: auto;}
		.height-100{height: 100px;}
		.relative{position: relative;}
		.abs{position: absolute;}
		.left_right{
			left: 0;
			right: 0;
		}
		.top_btm{
			top: 0;
			bottom: 0;
		}
		.margin-top-50{
	      margin-top: -50px;
	    }
	    .top-50{top:50%;} 
	    .left-50{left:50%;}
			.translate_50{
				transform: translate(-50%, -50%);
			}
	    .translateY_50{
	      transform: translateY(-50%);
	    }
		.table-cell{
			display: table-cell;
			min-width: 400px;
			vertical-align: middle;
			text-align: center;	
		}
		.inline-block{display: inline-block;text-align: center;}
		.line-height-150{line-height: 150px;}
		.line-height-2{line-height: 2;}
		.vertical-align-middle{vertical-align:middle;}
		.text-center{text-align: center;}
	    .before::before{
	      display: inline-block;
	      content: '';
	      height: 100%;
	      width: 0;
	      vertical-align: middle;
	    }
	    .flex-before{
	      flex-direction: column;
	      align-items: center;
	    }
	    .flex-before::before{
	      flex-grow: .5;
	      content: '';
	    }
	    .flex-wrap{flex-wrap: wrap;}
	    .flex-before-after::before,
	    .flex-before-after::after{
	      content: '';
	      width: 100%;
	      display: block;
	    }
	    .align-items-center{align-items: center;}    
	    .align-content-center{align-content: center;}
	    .justify-content-center{justify-content: center;}    
	    .align-self-center{align-self: center;}
	    .place-items-center{place-items:center;}
	    .place-content-center{place-content:center;}
	    .place-self-center{place-self:center;}
	    .top-calc{
	      top:calc( (100% - 100px) / 2);
	    }
	    .grid-template{
	      grid-template-columns: 1fr auto 1fr;
	      grid-template-rows: 1fr auto 1fr;
	      grid-template-areas: 
	      '. . .'
	      '. ttt .'
	      '. . .';
	    }
	    .grid-area-amos{
	      grid-area: ttt;
	    }
	    .padding{
	      padding: 50px 0;
	    }
	    .height-auto{
	      height: auto;
	    }
	    .table{
	      display: table;
	      width: 80%;
	      margin: auto;
	    }

1. line-height

使用情景： 單行文字垂直居中。

在沒有設定高度的時候，高度與行高一致，此時文字會位於行高的垂直居中的位置。如果設定了高度，將行高設定為與高度相同即可。

 <h2>1. line-height</h2>
  <div class="box  text-center  line-height-150  margin-auto">
    I am text
  </div>

2. inline-block + vertical-align + line-height

適用情景：多物件的垂直居中技巧

既然可以使用第一種方式對行元素達成垂直居中的話，當然沒有理由不能做到多行啊~
但是你需要將多個元素或多行元素當成一個行元素來看待，所以我們必須要將這些資料多包一層，並將其設定為inline-block， 且為其設定vertical-algin:center，並在該inline-block物件的外層物件使用line-height來代替height的設定。

  <h2>2. inline-block+vertical-align</h2>
  <div class="box text-center line-height-150">
    <div class="content inline-block vertical-align-middle line-height-2">
      立馬來看Amos實際完成的
      <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">      
        CSS3精美相簿效果    </a>
      效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
  </div>

3. :before + inline-block

這個寫法還是很有意思的，看完後我自己感覺還是很有收穫的。

適用情景：多物件的CSS垂直居中技巧

:before 偽類元素搭配 inline-block 屬性的寫法應該是很傳統的垂直居中的技巧了。
此方式的好處在於子元素居中可以不需要特別設定高度，我們將利用:before偽類元素設定為100%高的inline-block，再搭配上將需要居中的子元素同樣設定成inline-block性質後。
就能使用vertical-align:middle來達到垂直居中的目的了，此方式在以往其實是個非常棒的垂直居中解決方案，唯獨需要特別處理掉inline-block元素之間的4-5px空間這個小缺陷，但也很實用了。

<h2>3. :before+inline-block</h2>
<div class="box text-center  before">
  <div class="content inline-block vertical-align-middle">
    立馬來看Amos實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

這裡偽元素::before的運用十分的巧妙，有以下幾個關鍵點

  1. 父容器box3設定了height
  2. ::before設定了display:inline-block;，使偽元素成為內聯元素
  3. ::before設定了content:''使偽元素生效
  4. ::before設定了heigth:100%;使偽元素的高度與父容器的高度一致，為後面的vertical-align做鋪墊
  5. ::before設定了width:0;使偽元素不佔據實際的空間，但是參與頁面的佈局
  6. content設定inline-block是為了使vertical-algin:middle;生效，而vertical-align參照的物件是::before。所以結果就會垂直居中

其實看了上面的解釋，我們發現一切的工作都是為了使vertical-align生效。所以這個vertical-align還是十分神奇的，後面有時間需要好好研究一下。

4. absolute+top+transform

適用情景：多行文字的垂直居中技巧

因為此居中的定位元素不需要固定的寬高，我們利用絕對定位時的top 與right設定元素的上方跟左方各為50% 。
再利用translate(-50%,-50%)位移居中元素自身寬與高的50%就能達成居中的目的了。

<h2>4. absolute+top+transform</h2>
<div class="box relative">
  <div class="content height-100 abs top-50 left-50   translate_50">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

5. absolute + margin-auto

適用情景：多行文字的垂直居中技巧

又一個絕對定位的垂直居中的方案，這個方式比較特別一點，當元素設定為絕對定位後，假設它是抓不到整體可運用的空間範圍。
所以margin:auto會失效，但當你設定了top:0;bottom:0;時，絕對定位元素就抓到了可運用的空間了，這時你的margin:auto就生效了（神奇吧）。
如果你的絕對定位元素需要水平居中於父層，那你同樣可以設定left:0;right:0;來讓絕對定位元素取得空間可運用範圍，再讓marign-left與margin-right設定為auto即可居中。
但此方式的缺點是你的定位元素必須有固定的寬高（百分比也算）才能正常居中。

<div class="box relative">
 <div class="content margin-auto  height-100 abs left_right top_btm">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

6. relative + calc

適用情景：多行文字的垂直居中技巧

我們竟然可以在網頁中直接做計算，這真是太猛了，從此我們再也不用在那邊絞盡腦汁的數學計算了，或是想辦法用js來動態計算。
我們可以很輕鬆的利用calc()這個方法，來將百分比及時且動態的計算出實際要的是什麼高度，真可謂是劃時代的一個方法啊。
但這個方法需要注意的是大量使用的話，網頁效能會是比較差的，所以請謹慎使用。

<div class="box">
  <div class="content text-center top-calc relative margin-auto height-100">
    立馬來看Amos實際完成的   
     <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

7. relative + translateY

適用情景：多行文字的垂直居中技巧

這個技巧是利用了top:50%的招式，讓你的元素上方能產生固定百分比的距離。
接著讓要居中的元素本身使用tanslateY的百分比來達成垂直居中的需求，translate是一個很棒的屬性，由於translate的百分比單位是利用元素自身的尺寸作為100%，這樣讓我們要利用元素自身寬高做事變得方便很多。

<h2>7. relative + translateY </h2>
<div class="box">
  <div class="content text-center top-50 relative margin-auto translateY_50">
    立馬來看Amos實際完成的   
     <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

8. relative + margin

多行文字的垂直居中技巧

絕對定位在這個例子中會設定top:50%來抓取空間高度的50%。
接著在將居中元素的margin-top設定為負一半的高度，這樣就能讓元素居中了

<h2>8. relative + margin </h2>
<div class="box">
  <div class="content text-center height-100  top-50 relative margin-auto margin-top-50">
    立馬來看Amos實際完成的   
     <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

9. flex + margin-auto

適用情景：多行文字的垂直居中技巧

用Flex來居中，由於Flex元素對空間解讀的特殊性，我們只要在父層元素設定display:flex，接著在需要垂直居中的元素上設定margin:auto，即可自動居中

<h2>9. flex + margin-auto</h2>
<div class="box flex">
  <div class="content margin-auto">
    立馬來看Amos實際完成的   
     <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

10. flex + align-items

適用情景：多行文字的垂直居中技巧

不由的說Flex真的是一個神物，我們只要設定父層display:flex以及設定次軸(cross axis)屬性align-items:center 就好了

<h2>10. flex + align-items</h2>
<div class="box flex align-items-center  justify-content-center">
  <div class="content text-center">
    立馬來看Amos實際完成的   
     <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

11. flex + align-self

適用情景：多行文字的垂直居中技巧

align-self 應該大家都不陌生，基本上就是對flex次軸cross axis 的個別對齊方式只要對單一子層元素設定align-self:center就能達成垂直居中的目的了。

<h2>11. flex + align-self</h2>
<div class="box flex   justify-content-center">
  <div class="content align-self-center text-center">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

12. flex + align-content + ::before + ::after

適用情景：多行文字的垂直居中技巧

在正常的狀況下，align-content 僅能對次軸多行flex item做居中，但是當我今天子層元素不確定有多少個時。
且有時可能會有單個的情況出現時，此技巧就能用到了（當然你也能有其他解法），既然是多行子元素才能用。
那我們就為單個子元件多加兩個兄弟吧，使用:before以及:after 來讓子元素增加到多個，這樣就能使用flex的align-content屬性來居中

<h2>12. flex + align-content + before + after + flex-wrap</h2>
<div class="box flex flex-wrap align-content-center   justify-content-center  flex-before-after">
  <div class="content text-center">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

13. flex + flex-direction + ::before + flex-grow

適用情景：多行文字的垂直居中技巧

Flex有多種方式可以讓你把資料居中，適用Flex-grow的延展特性來達成。
這個例子中Amos適用了flex-direction:column直式排法，搭配:before偽元素適用flex-grow伸展值能夠取得剩下所有空間的特性。
把它設定成一半的剩餘空間就能做到把內容資料準確的推到垂直中間位置，算是個傳統技法的延伸方式

<h2>13. flex + align-items + before + flex-direction+ flex-grow</h2>
<div class="box flex  flex-before">
  <div class="content text-center">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

14. gird + margin-auto

適用情景：多行文字的垂直居中技巧

CSS Grid的align-content跟Flex的align-content有點差異，CSS Grid對於空間的解釋會跟Flex有一些些的落差。
所以導致align-content在Flex中僅能針對多行元素起作用，但在Grid中就沒這個問題，所以我們可以很開心的使用align-content來對子元素做垂直居中，絲毫不費力氣

<h2>14. grid + margin-auto</h2>
<div class="box grid">
  <div class="content margin-auto">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

15. gird + align-items

適用情景：多行文字的垂直居中技巧

align-items不僅是Flex可用，連CSS Grid也擁有此屬性可使用，但在Flex中align-items是針對次軸cross axis作對齊。
而在CSS Grid中則是針對Y軸做對齊，你可以把它想象成是表格中儲存單元格的vertical-align屬性看待，就可以很好理解了

<h2>15. grid + align-items</h2>
<div class="box grid align-items-center  justify-content-center">
  <div class="content text-center">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

16. gird + align-content

適用情景：多行文字的垂直居中技巧

CSS Grid的align-content跟Flex的align-content有點差異，CSS Grid對於空間的解釋會跟Flex有一些些的落差。
所以導致align-content在Flex中僅能針對多行元素起作用，但在Grid中就沒這個問題，所以我們可以很開心的使用align-content來對子元素做垂直居中，絲毫不費力氣

<h2>16. grid + align-content</h2>
<div class="box grid align-content-center  justify-content-center">
  <div class="content text-center">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

17. gird + align-self

適用情景：多行文字的垂直居中技巧

align-self 應該大家都不陌生，基本上就是對grid Y軸的個別對齊方式，只要對單一子層元素設定為align-self:center就能達成垂直居中的目的了

<h2>17. grid + align-self</h2>
<div class="box grid  justify-content-center">
  <div class="content text-center align-self-center">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

18. gird + place-items

適用情景：多行文字的垂直居中技巧

place-items這屬性不知道有多少人用過，此屬性是align-items與justify-items的縮寫，簡單的說就是水平與垂直的對齊方式，想當然的，設定center就能居中

<h2>18. grid + place-items</h2>
<div class="box grid place-items-center">
  <div class="content text-center">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

19. gird + place-content

適用情景：多行文字的垂直居中技巧

place-content這屬性有多少人用過，此屬性是align-content與justify-content的縮寫，簡單的說就是水平與垂直的對齊方式，想當然的，設定center就能居中了

<h2>19. grid + place-content</h2>
<div class="box grid   place-content-center">
  <div class="content text-center">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

20. gird + place-self

適用情景：多行文字的垂直居中技巧

此屬性是align-self與justify-self的縮寫，簡單的說就是水平與垂直的對齊方式，想當然的，設定center就能居中了

<h2>20. grid + place-self</h2>
<div class="box grid">
  <div class="content text-center place-self-center">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

21. gird + grid-template

適用情景：多行文字的垂直居中技巧

CSS Grid最令人驚訝的就是這個template的功能了，簡直就是把塊元素當畫布在使用，我們僅需要把模板設定成三列，就能搞定垂直居中了

<h2>21. grid + grid-template + grid-area</h2>
<div class="box grid  grid-template">
  <div class="content text-center  grid-area-amos">
    立馬來看Amos實際完成的    
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

22. table-cell

適用情景：多行文字的垂直居中技巧

這一招的原理在於使用 CSS display屬性將div設定成表格的單元格，這樣就能利用支援儲存單元格對齊的vertical-align屬性來將資訊垂直居中

<h2>22. table-cell</h2>
<div  class="table">
  <div class="box table-cell">
    <div class="content margin-auto">
      立馬來看Amos實際完成的
      <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
        CSS3精美相簿效果    </a>
      效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
  </div>  
</div>

23. padding

適用情景：多行文字的垂直居中技巧

雖然很簡單，但你無法反駁的是，我的資料的確垂直居中啦

<h2>23. padding</h2>
<div class="box  padding   height-auto">
  <div class="content margin-auto text-center">
    立馬來看Amos實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！  </div>
</div>

24. write-mode

多行文字的垂直居中技巧

它的用途是改變文字書寫的方向從橫變豎，且支援度從很早期的IE5就有支援了，但當時Amos很少使用，一來是網頁多是橫書較多，另外當時除了IE瀏覽器意外，其他瀏覽器的支援度都不是很好，也就很少使用了。
使用write-mode將一整個文字容器變成直書，接著將此容器利用text-align:center來達到垂直居中的目的。
白話一點的解說就是，你把原本橫排的文字變成豎排，所以原本橫排用到的水平對齊方式，就變成了控制直排的中間了。
原理就是這麼簡單。
但要特別注意的是瀏覽器對此語法的支援度來說，需要拆開寫法才行，不然某些瀏覽器的語法不同，可能會讓你的網頁在某些瀏覽器上看起來無效，這會是最需要注意到的

CSS
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  writing-mode: tb-lr; /* for ie11 */
  writing-mode: vertical-lr;
  text-align: center;
  margin:0 auto;
}
.content{
  width: 400px;
  background: #ccc;
  display: inline-block; /* for ie & edge */
  width: 100%;
  writing-mode: lr-tb;
  margin: auto; 
  text-align: left;
}
.box .txt{
  width: 80%;
  margin: auto;
}

HTML
<h2>23.writing-mode</h2>立馬來看Amos實際完成的
<div class="box box23">
  <div class="content">
    <div class="txt">
      立馬來看Amos實際完成的     
       <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
        CSS3精美相簿效果      </a>
      效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！      這個置中的想法來自於 Paul     
      </div>
  </div>
</div>

本文轉載自傳送門
文中例項可下載

相關推薦

CSS垂直居中24法

今天看到一篇神文，講解了23中垂直居中的方法，現在自己參照原文進行每一種方法的詳細講解。 以下是所有例子中的公共CSS部分 *{ margin: 0; padding: 0; } h2{text-align: c

css 垂直居中

color head word 偽類 width 實現 想想 ref pan 　　今天端午節， 可苦逼的是還得加班，不過三倍工資，開心多了，第一次拿，想想心裏似乎還有點小激動，好了，扯到為止，進入正題 　　今天偶然看到一個垂直居中的好方法，元素 未知高度，未知高度，未知高度

CSS垂直居中完美有用實例

media wid -c stack get rst ticket middle family <!DOCTYPE HTML> <html> <head> <me

前端 css 垂直居中及自適應問題

position enter fix 作用 webkit family 需要 自適應居中 cover 此css作用為將下面div結構中的Container-fluid背景自適應屏幕，content自適應居中 1、Div結構 all Head Container-

css垂直居中的四種方法

center utf-8 borde gre abs ddl for relative eight <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

css 垂直居中的幾種方法

div idt 浮動 spl head ref 維度 oot .html 1.圖片水平垂直居中 html: <div class="parent"> <div class="child">

css垂直居中幾種方法（二）

play spa light dex bsp png ava ems pre 方法1：table-cell .box1{ display: table-cell; vertical-align: middle; text-a

css垂直居中設定

轉載自大佬的文章：純css實現垂直居中的幾種方法（https://www.cnblogs.com/hutuzhu/p/4450850.html） 總結得很棒，有好幾種方法自己沒用過的，拷貝過來給自己看看   垂直居中是佈局中十分常見的效果之一，為實現良好的相容性，PC端實現垂直居中的方法一般是

CSS垂直居中和水平居中方式

一。垂直居中 1.單行文字實現居中：設定行高 .box { width:200px; height:200px; line-height:200px;//實現單行文字居中 background:red; } .

CSS 垂直居中的11種方式

11種實現方式分別如下： 1. 使用絕對定位和負外邊距對塊級元素進行垂直居中 html程式碼： <div id="box"> <div id="child">我是測試DIV</div> </div> 複製程式碼：

css垂直居中七種方法

Margin:0 auto; 適用於塊狀元素具有寬高。不是用於文字居中。 text-align：center可實現文字居中，vertical-align垂直居中文字；可用於內聯元素的居中 text-align+line-height設定與height同大時，文字會水平垂直居中。

CSS垂直居中佈局|被黑了不能提款怎麼辦？

垂直居中是佈局中十分常見的效果之一，為實現良好的相容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。 有了css3，針對移動端的垂直居中就更加多樣化。 方法一、table-cell html結構： <div class="box box

CSS垂直居中的11種實現方式

注：以下demo都只是針對現代瀏覽器所做，未相容低版本的IE以及其它非主流瀏覽器。 11種實現方式分別如下： 1. 使用絕對定位和負外邊距對塊級元素進行垂直居中 html程式碼： <div id="box"> <div id="child">我是測試DIV</div

CSS垂直居中的三種方式

在說垂直居中之前先看一下水平居中，相對於垂直居中來說水平居中就簡單多了：        如果是一個行內元素，就對它的父級直接使用text-align: center;        如果是一個塊級元素，就對它自身

解決CSS垂直居中的幾種方法（基於絕對定位，基於視口單位，Flexbox方法）

       在CSS中對元素進行水平居中是非常簡單的：如果它是一個行內元素，就對它的父元素應用 text-align: center ;如果它是一個塊級元素，就對它自身應用 margin: aut

CSS垂直居中幾種方法

垂直居中佈局很常用到，自己總結下來以後用的話也很方便，算是對自己上網閱讀資料的一個考核 1.不知道自己高度和父容器高度的情況下, 利用絕對定位只需要以下三行： parentElement{ position:relative; } child

[CSS]圖片、多行文本、多行文本與圖片的水平垂直居中

支持 clas ont body style back rgb 添加 vertica 圖片垂直居中：IE8+支持方法1.box { line-height:300px; text-align:center;}.box>img { vertical-a

CSS水平垂直居中

水平居中 ron lac 表現 -a posit ble ive width 水平居中 HTML代碼： 1 <div class="parent"> 2 <div class="child"></div> 3 </div&

盤點8種CSS實現垂直居中水平居中的絕對定位居中技術

其他 margin phone ie10 logs html mar over 防止 1.絕對定位居中（Absolute Centering）技術 　　我們經常用margin:0 auto;來實現水平居中，而一直認為margin:auto;不能實現垂直居中......實際上

css水平居中和垂直居中的方法

solid str 指正 relative eight 方法 ron for child html <div class="father">　　<div class="child"></div></div> 法一：已知道兩個盒