css中的水平垂直居中

水平居中

1.内联元素和文字

<div>
    <span></span>
</div>

1. div{text-align:center} 加在父元素上
2. 把内联元素设置为block

span{
    display: block;
    text-align: center;
}

2.块级元素

<div class="div1 father">
	<div class="div2 son"></div>
</div>

.div1{width: 500px;background-color: yellow;height: 300px;}
.div2{width: 100px;background-color: pink;height: 100px;}	

（1）子元素宽度已知

1. 定位，适用于子元素比父元素宽的情况

.father{
    position: relative;
}
.son{
    position: absolute;
    left:50%;
    margin-left: -50px;
}

2. div2必须设置宽度,不适用于子元素比父元素宽的情况

.son{
    width:100px;
    margin:0 auto;
}

（2）子元素宽度未知

1. 不支持ie6,ie7

.father{
    display: table
}
.son{
    margin:0 auto;
}

2. 使用absolute + transform

.father{
    position: relative;
}
.son{
    position: absolute;
    left:50%; 
    transform: translateX(-50%);
}

3. 使用flex + margin，ie6,ie7,ie8不支持

.father{display: flex;}
.son{margin:0 auto;}

4. 使用flex + justify-center, ie6,ie7,ie8不支持

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

垂直居中

1.内联元素和文字

line-height=行高;

2.块级元素

（1）子元素高度已知

1. 定位

.father{ 
    position: relative; 
}
.son{
    position: absolute; 
    top:50%; 
    margin-top:-50px;
}

（2）子元素高度未知

1. table-cell + vertical-align , 只需加在父元素上

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

2. 使用absolute + transform

.father{ 
    position: relative; 
}
.son{ 
    position: absolute; 
    top:50%; 
    transform:translateY(-50%); 
}