水平居中方法总结

发表于 |

  • 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.

  • 若是块级元素且定宽, 该元素设置 margin:0 auto 即可.

  • 若是 display:inline-block, 该元素的父元素设置 text-align:center 即可.

  • 若不论是块级还是行内，而且元素不定宽，可以给元素设置 display: table 然后设置 margin: 0 auto 即可.

  • 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:

1
2
3
4
5
6
.parent{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}

fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器.

  • 使用flex 2012年版本布局, 可以轻松的实现水平居中, 子元素设置如下:
1
2
3
4
.son{
    display: flex;
    justify-content: center;
}
  • 使用CSS3中新增的transform属性, 子元素设置如下:
1
2
3
4
5
.son{
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
}
  • 使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:
1
2
3
4
5
6
.son{
    position:absolute;
    width:固定;
    left:50%;
    margin-left:-0.5宽度;
}
  • 使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:
1
2
3
4
5
6
7
.son{
    position:absolute;
    width:固定;
    left:0;
    right:0;
    margin:0 auto;
}