css div 垂直置中

標籤：style   blog   http   color   ar   for   div   sp   log   

參考：http://css-tricks.com/centering-in-the-unknown/

<style>.valign {  font-size: 0px;/* clear spacing*/}.valign:before {  content: ‘‘;  display: inline-block;  height: 100%;  vertical-align: middle;  margin-right: -0.25em; /* Adjusts for spacing */}.valign-middle,.valign-bottom {  display: inline-block;  font-size: 1rem;}.valign-middle {  vertical-align: middle;}.valign-bottom {  vertical-align: bottom;}</style>

<div class="valign" style="height: 20rem;border:1px solid red;">   <div class="valign-middle" style="border:1px solid blue;">      我在中間  </div></div><br><div class="valign" style="height: 20rem;border:1px solid red;">   <div class="valign-bottom" style="border:1px solid blue;">      我在底部  </div></div>

 

css div 垂直置中