20151008绝对定位水平垂直居中

阅读更多

http://www.zhangxinxu.com/wordpress/?p=3794

让一个div在父元素中水平垂直居中的方法：（假设该DIV宽度为200px,高度为200px）

父元素：若其父元素不是包含块时，以body为父容器进行绝对定位。
包含块：使用position：absolute/relative/fixed的元素。

例如：以body为父容器时水平垂直居中效果：



div的位置随着窗口的大小变化而变化。

1.传统方法
position:absolute;
left:50%;
top:50%;
margin-left:-100px;//为该DIV的宽度的一半
margin-top:-100px;//为该DIV的高度的一半
width:200px;
height:200px;

2.CSS3方法
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);//在width和heigth未知的条件下也可以。
width:200px;
height:200px;

3.margin:auto方法：
position:absolute;
left:0;right:0;top:0;bottom:0;
margin:auto;
width:200px;
height:200px;

• 
• 大小: 356.3 KB

• 查看图片附件