CSS垂直方向上的居中,盡管CSS有vertical-align屬性,但是並不能有效解決未知高度的垂直居中問題,如果在一個DIV標簽裡有未定義高度的文字或圖片,那就更不好弄了)。
在一些標准浏覽器如Mozilla, Opera, Safari.,可將父級元素顯示方式設定為TABLE(display: table;) ,內部子元素定為table-cell (display: table-cell),通過vertical-align特性使其垂直居中,但非標准浏覽器是不支持的。
非標准浏覽器只能在子元素裡設距頂部50%,裡面再套個元素距頂部-50% 來抵消。就像下面的代碼,可解決使用vertical-align屬性不能解決的垂直居中問題:
CSS代碼部分:
1
body {
padding
:
0
;
margin
:
0
;}
2
body,Html{
height
:
100%
;}
3
#outer {
height
:
100%
;
overflow
:
hidden
;
position
:
relative
;
width
:
100%
;
background
:ivory;}
4
#outer[id] {
display
: table;
position
:
static
;}
5
#
middle
{
position
:
absolute
;
top
:
50%
;}
6
#
middle
[id] {
display
:
table-cell
;
vertical-align
:
middle
;
position
:
static
;}
7
#inner {
position
:
relative
;
top
:
-50%
;
width
:
400px
;
margin
:
0
auto
;}
8
div.greenBorder {
border
:
1px
solid
green
;
background-color
: ivory;}
DIV部分:
1
<
div
id
=
"outer"
>
2
<
div
id
=
"middle"
>
3
<
div
id
=
"inner"
class
=
"greenBorder"
>
4
</
div
>
5
</
div
>
6
</
div
>
本方法兼容性也是很不錯的,只不過有些麻煩,但各大浏覽器的兼容性我們又沒法控制,所以就湊合吧,總比沒有解決辦法要好得多。本文不涉及水平方向上的居中,水平方向上當然比較容易些,可以margin:auto試一下。