css样式垂居中布局总结

1.不知道img宽高的垂直居中（1）

<div>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://i4.tietuku.com/8f35576c9e8cb145.jpg">
</div>
div{
height:400px;
width:400px;
background:#fff;
position:relative;
}
img{
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
display:block;
/*以上是绝对居中的css*/
height:auto;
width:auto;
max-height:300px;
max-width:300px;
/*以上是为了让图片不超出范围的css*/
}
//使用这个方法需要将该元素的父元素设置为static以外的值

1.不知道img宽高的垂直居中（2）

<div>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://i4.tietuku.com/8f35576c9e8cb145.jpg">
        <span></span>
</div>
.div{width: 800px;height: 800px;border: 3px solid yellow;text-align: center;}
img{vertical-align: middle;}
span{display:inline-block;height: 100%;vertical-align: middle;}
//这个方法要注意两点
//1.span内部不能有任何东西，包括空格换行符
//2.span和img之间不能有任何东西

1.不知道img宽高的垂直居中（3）

<div>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://i4.tietuku.com/8f35576c9e8cb145.jpg">
</div>
img {
    vertical-align: middle;
  }
  div:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }

1.不知道img宽高的垂直居中（4）

<div>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://i4.tietuku.com/8f35576c9e8cb145.jpg">
</div>
.div{width: 800px;height: 800px;border: 3px solid yellow;line-height:800px;}
img{vertical-align: middle;}

1.不知道img宽高的垂直居中（5）

<div>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://i4.tietuku.com/8f35576c9e8cb145.jpg">
</div>
.div{width: 800px;height: 800px;border: 3px solid yellow;display:flex;flex-direction:row;align-items:center;}

display:inline-block将图片既具有block的宽度高度特性又具有inline的同行特性。

这里的img与一个height:100% 的span同行，使这一行的行高撑满div。vertical-align: middle;让行内元素垂直居中。

text-align: center;页面内居中对齐，因为水平上有宽度的只有图片，所以图片水平也居中了。

关于为什么〈span〉也要加vertical-align：因为你如果不给span设置属性，css会给span一个默认属性：vertical-align:baseline;也就是span底部对齐父元素的基线（baseline），你在span里打个字就看出来了，基线被自动画在div的底部的话，就跟着依据这条基线为轴垂直居中了。