图片居中显示

来源：2-1 头部的制作

VermouthYan

2019-07-22 23:33:07

老师我想问下就是如何让图片在模块中水平垂直居中显示呢，不用内填充的方法。

<style>
    *{margin:0; padding:0;}
    .header{
             width:100%; height:100px; 
             overflow:hidden;
           }
    .logo{float:left}
</style>

<body>
    <div class="header">
        <div class="logo"><img src="...."></div>
    </div>
</body>
在这种情况下如何设置：
1.如何让.logo整个模块实现水平及垂直居中
2.如何让图片在.logo模块中实现水平及垂直居中？与图片的尺寸有无关系？（如果有，在不知道图片尺寸的情况下如何进行设置，不对图片进行宽高设置是否有影响）
3.能否同时实现.logo模块在.header模块中水平垂直居中和img图片在.logo模块中水平垂直居中，应如何进行设置

写回答

1回答

好帮手慕慕子

2019-07-23

同学你好，你做的这几种居中方式都可以通过定位实现，结合margin属性，实现水平垂直居中显示

让logo整个在header下水平垂直居中显示
效果图：
可以通过各父元素设置ltext-align属性实现图片的水平居中。然后通过盒模型计算给图片设置上外边距实现垂直居中。
与图片的尺寸有关，因为图片自身有大小，如果不设置图片的宽高会有已默认的大小显示，所以推荐给图片设置固定的宽度或者高度
效果图：
这个问题，在解答第二个问题的时候，就已经实现了，同学可以参考一下