CSS 元素垂直居中的 6種方法(轉)


轉自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/

利用CSS進行元素的水平居中,比較簡單,行級元素設置其父元素的text-align center,塊級元素設置其本身的left 和 right margins為auto即可。本文收集了六種利用css進行元素的垂直居中的方法,每一種適用於不同的情況,在實際的使用過程中選擇某一種方法即可。

Line-Height Method

line height demo
試用:單行文本垂直居中,demo

代碼:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Text here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">200px</span><span class="sy0">;</span>
<span class="br0">}</span>

垂直居中一張圖片,代碼如下

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"image.png"</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">""</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
<span class="re0">#parent</span> <span class="br0">{</span>
<span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">200px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#parent</span> img <span class="br0">{</span>
<span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">middle</span><span class="sy0">;</span>
<span class="br0">}</span>

CSS Table Method

table cell demo

適用:通用,demo

代碼:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
<span class="re0">#parent</span> <span class="br0">{</span><span class="kw1">display</span><span class="sy0">:</span> table<span class="sy0">;</span><span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">table-cell</span><span class="sy0">;</span>
<span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">middle</span><span class="sy0">;</span>
<span class="br0">}</span>

低版本 IE fix bug:

1
2
3
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span>
<span class="br0">}</span>

Absolute Positioning and Negative Margin

absolute positioning and negative margin demo

適用:塊級元素,demo

代碼:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
7
8
9
<span class="re0">#parent</span> <span class="br0">{</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span><span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
<span class="kw1">top</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">left</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">30%</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">-15%</span> <span class="nu0">0</span> <span class="nu0">0</span> <span class="re3">-25%</span><span class="sy0">;</span>
<span class="br0">}</span>

Absolute Positioning and Stretching

absolute positioning and vertical stretching demo

適用:通用,但在IE版本低於7時不能正常工作,demo

代碼:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
7
8
9
10
11
<span class="re0">#parent</span> <span class="br0">{</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span><span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
<span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">bottom</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">right</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">30%</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="br0">}</span>

Equal Top and Bottom Padding

vertical centering with padding demo

適用:通用,demo

代碼:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
<span class="re0">#parent</span> <span class="br0">{</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">5%</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">10%</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">}</span>

Floater Div

vertical centering with floater div demo

適用:通用,demo

代碼:

html

1
2
3
4
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"floater"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
7
8
9
10
11
<span class="re0">#parent</span> <span class="br0">{</span><span class="kw1">height</span><span class="sy0">:</span> <span class="re3">250px</span><span class="sy0">;</span><span class="br0">}</span>
<span class="re0">#floater</span> <span class="br0">{</span>
<span class="kw1">float</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">-50px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">clear</span><span class="sy0">:</span> <span class="kw2">both</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">100px</span><span class="sy0">;</span>
<span class="br0">}</span>

以上就是六種方法,可以在實際的使用過程中合理選擇,參考文章《vertical-centering》。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com