CSS盒模型和图片水平居中和垂直居中

作者: 雨中晨星 | 来源:发表于2020-03-07 00:00 被阅读0次

CSS盒模型和图片水平居中和垂直居中
css 图片居中
CSS图片居中(水平居中和垂直居中)
居中布局
css 居中
CSS解决盒模型居中的问题
CSS - 垂直水平居中方法
CSS居中完全指南——构建CSS居中决策树
CSS居中小结
css水平居中和水平垂直居中

盒子水平居中，使用margin:0 auto

<style>
.haha{
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    margin: 0 auto;
}
</style>
<body>
    <div class="haha">
         
        </div>
</body>

盒子垂直居中，使用相对定位，以body为基准absolute，然后top:50%，但是盒子有高度所以还得margin-top:-100px，让盒子上移自己宽度的一半。

<style>
.haha{
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    top: 50%;
    margin-top: -100px;
}
</style>
<body>
    <div class="haha">
         
        </div>
</body>

综上，如果要让div垂直居中，水平居中，就使用相对定位，以body为基准absolute，top left 50%并且减掉自身的一半，代码如下

<style>
.haha{
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
</style>
<body>
    <div class="haha">
         
        </div>
</body>

当使用插入图片的方式时，img是行内元素所以只需要使用text-align:center和行高等于高，就能使图片水平居中垂直居中。

<style>
.haha{
    width: 500px;
    height: 500px;
    text-align: center;
    line-height: 500px;
}
</style>
<body>
    <div class="haha">
         <img src="images/logo.png">
        </div>
</body>

当使用背景图片水平居中，使用top center，代码如下：

<style>
.haha{
    background:url(images/logo.png) no-repeat top center;
    width: 300px;
    height: 300px;
}
</style>
<body>
    <div class="haha">
         
        </div>
</body>

当使用背景图垂直居中，代码如下，50%是参考值

<style>
.haha{
    background:url(images/logo.png) no-repeat left 50%;
    width: 300px;
    height: 300px;
}
</style>
<body>
    <div class="haha">
         
        </div>
</body>

背景图水平+垂直居中，如果需要图片全部铺满，则加上background-size: contain;

    <style>
.haha{
    background:url(images/logo.png) no-repeat center center;
    width: 300px;
    height: 300px;
}
    </style>
<body>
    <div class="haha">
         
        </div>
</body>