CSS实现水平居中和垂直居中

	在写网页时经常要做到对齐以及居中等，下面就来浅谈水平居中以及垂直居中。

水平居中

1. text-align:center实现行内元素水平居中。
2. margin:0 auto实现块元素水平居中。
3. 使用CSS3中新增的transform属性。

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

4. 使用flex 布局

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

5.使用绝对定位方式, 以及负值的margin-left,margin-left是width的一半。

.parent{
	position:relative;
	}
.son{
    position:absolute;
    width:100px;
    left:50%;
    margin-left:-50px;
}

6.使用绝对定位方式, 以及left:0;right:0;margin:0 auto;

.parent{
	position:relative;
	}
.son{
    position:absolute;
    width:100px;
    left:0;
    right:0;
    margin:0 auto;
}

垂直居中

1. 设置 line-height 等于父元素高度

.box{ height:20px;line-height :20px}

2.使用flex 布局

.parent {
  display: flex;
  align-items: center;
}

3.可用 transform

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

4.使用绝对定位方式, 以及负值的margin-top,margin-top是width的一半

.parent{
	position:relative;
	}
.son{
    position:absolute;
   height:100px;
    top:50%;
    margin-top:-50px;
}

5.使用绝对定位方式, 以及left:0;right:0;margin:0 auto;

.parent{
	position:relative;
	}
.son{
    position:absolute;
   height:100px;
    left:0;
    right:0;
    margin:0 auto;
}

6.若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器*.

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

7.元素高度不定时， 可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

参考文章