水平垂直居中方法总结

水平垂直居中方法总结

一 line-height+vertical-align方法

.parent{
    line-height:父元素的height
}
img{
    vertical-align:middle;
    text-align:center;
}

注：line-height只对文本起作用，对没有文本的行间元素不起作用，vertical-align的作用是使图片与文本垂直居中对齐。

 二 display：table的方法

<div class="parent">
    <div class="imgwrap">
        <img></img>
    </div>
</div>

 

.parent{
    display:table;
    text-align:center;
}
.imgwrap{
    display:table-cell;
    vertical-align:middle;
}

三 position定位+margin居中

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

四 position定位+translate居中 

img{
    position:absolute;
    top:50%;
    left:50%;
    transform:tanslate(-50%,-50%);
}

五 position+负margin居中 

img{
    width：w;
    height:h;
    position:absolute;
    left:50%;
    right:50%;
    margin-left:-1/2*w;
    margin-top:-1/2*h;
}

六 flex垂直居中

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

注：使用了flex后，clear，vertical-align会失效 

方法一只能用于居中行间元素，方法二、三、四、五、六同时可以居中块状元素