图片垂直居中的两种方式2019-05-30

一. 弹性布局

*{

margin: 0;

padding: 0;

}

html,body{

height: 100%;

}

.header{

width: 1200px;

height: 80px;

margin: 0 auto;

background: #6F747A;

}

.header .img{

height: 100%;

display: flex;

align-items: center;

}

.header img{

width: 156px;

height: 20px;

}

二.绝对定位

*{

margin: 0;

padding: 0;

}

html,body{

height: 100%;

}

.header{

width: 1200px;

height: 80px;

margin: 0 auto;

background: #6F747A;

position: relative;

}

.header img{

width: 156px;

height: 20px;

position: absolute;

left: 0;

top: 50%;

/* margin-top: -10%; */

transform: translateY(-50%);

}