16种CSS水平垂直居中方法

16种css水平垂直居中方法以及应用（文字、图片）

一、垂直居中

1、行内元素

基本思想：单行文本子元素line-height 值为父元素 height 值

.parent {
    height: 200px;
}

.son {
    line-height: 200px;
}

2、块级元素

2.1行内块级元素

基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央

兼容性：支持IE7

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}

2.2table布局

兼容性：支持IE6/IE7，IE8无效

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}

2.3flex弹性布局

2009版写法

兼容性：不支持IE

.parent {
    display: box;
    box-orien: vertical;
    box-pack: center;
}

2012版写法

兼容性：IE8/IE9不支持

.parent{
  display:flex;
  justify-content:center;
}
.son{
  align-self:center;
}

2.4绝对定位+transform:translate(-50%,-50%)

.parent{
  position:relative;
}
.son{
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

二、水平居中

1、行内元素

基本思想：父元素设置text-align: center即可实现行内元素水平居中

.parent {
    text-align: center;
}

2、块级元素

2.1一般居中

基本思想：该元素设置margin:0 auto

.son {
    margin: 0 auto;
}

2.2子元素含float

基本思想：子元素包含 float:left 属性, 让父元素宽度设置为fit-content,并且配合margin，fit-content是css3的新属性值

.parent{
    width:fit-content;
    margin:0 auto;
}

.son {
    float: left;
}

2.3 flex弹性布局

2009版本写法

.parent{
    display:box;
    box-orient:horiaontal;
    box-pack:center;
}

2012版写法

.parent{
    display:flex;
    justify-content:center;
}

2.4绝对定位

• transform