CSS样式垂直居中总结

一.水平居中：

.parent {  

    1. a. 一个行内元素；

        b. 多个块状元素，还需将元素的display属性设置为inline-block;

text-align:center;   

    2.块状元素

margin: 0 auto;
width:300px;//一定要有宽度 

    3.CSS3的属性

display:flex;
justify-content:center;

}

二.垂直居中：

1.通过设置行高

.parent {
    height: 200px;
    line-height:200px; //行高与高一致
}

2.多行的行内元素

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

.parent {
    width: 300px;
    height: 300px;
    /* 以下属性垂直居中 */
    display: table-cell;
    vertical-align:middle;
}

3.已知高度的块状元素解决方案

.parent{
    position:relative;
}
.item{
    position: absolute;
    top: 50%;
    margin-top: -50px;  /* margin-top值为自身高度的一半 */
    height: 100px
   
}

三.水平垂直居中：

1.已知高度和宽度的元素，这是一种不常见的居中方法，可自适应：

.item{
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

2.已知高度和宽度的元素解决方案 

.parent{
    position:relative;
}
.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */
    margin-left: -75px;
}

3.未知高度和宽度元素：

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}

4.使用flex布局实现

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

四.其它

1.图片居中对齐

img {
    display: block;
    margin: auto;
    width: 40%;
}

2.利用span图片在div中水平垂直居中：

.parent{
	text-align: center;
	span{
	    height: 100%;
	    vertical-align: middle;
	    display: inline-block;
	}
	img{
	    vertical-align: middle;
	}
}

3.文字水平垂直居中

/*单行文字居中*/
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

4.logo在a链接垂直居中：

.logo{
    height:20px;
    a{
        line-height: 20px;
        font-size: 0;
        img{
            vertical-align: middle;
        }
    }
 }