css实现div，文字水平居中的方案。

本文的目的为记录个人开发中常用的几种居中方案，以供大家参考。

//basic css

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

************************************************居中相关************************************************
假设div的宽高均为100px。
1.div水平居中，直接使用margin:0 auto;

2.使用绝对定位让div水平垂直居中。(若想要div在某个特定的容器中水平垂直居中，则需要把容器的position设置为relative)
.div {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin: -50px 0 0 -50px;
}

3.使用相对定位让div水平垂直居中。
.div {
position: relative;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}

4.文字的水平居中，直接设置容器text-align: center;

5.文字的水平垂直居中, 设置容器text-align: center; line-height: 容器的高度;

************************************************居中相关************************************************