使用绝对定位方式可实现这个效果,如下边这个示例:
1
2
3
|
<
div
class
=
"box"
>
<
div
class
=
"demo"
>这个div要在box中水平居中,垂直居底</
div
>
</
div
>
|
CSS代码:
1
2
|
.con-box{
position
:
relative
;
width
:
800px
;
height
:
500px
;
background
:
#000
;}
.demo{
position
:
absolute
;
width
:
200px
;
height
:
150px
;
bottom
:
0
;
left
:
50%
;
margin-left
:
-100px
;}
|
总结一下:
这个例子中 position:absolute;表示定义demo这div绝对定位,bottom:0;定义垂直居底,left:50%;margin-left:-100px;定义水平居中。