一、水平居中
-
-
若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
-
若是块级元素, 该元素设置 margin:0 auto即可.
-
若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
.parent{ width:-moz-fit-content; -webkit-fit-content; width:fit-content; margin:0 auto; }
fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器
-
使用flex 2012年版本布局, 可以轻松的实现水平居中, 子元素设置如下:
-
.son{
dispaly:flex;
justify-center;
}
5.使用flex 2009年版本, 父元素display: box;box-pack: center;如下设置:
.parent{
display:-webkit-box;
-webkit-box-orient:horizontal;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
display:-o-box;
-o-box-orient:horizontal;
-o-box-pack:center;
display:-ms-box;
-ms-box-orient:horizontal;
-ms-box-pack:center;
display:box;
box-orient:horizontal;
box-pack:center;
}
6.使用CSS3中新增的transform属性, 子元素设置如下:
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
7.使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:
.son{
position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;
}
8.使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:
.son{
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;
}