关于盒子垂直居中的一些小技巧

最新推荐文章于 2023-11-03 10:33:06 发布

zhangren888

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量375

点赞数

分类专栏： CSS|CSS3 文章标签： css 垂直居中盒子垂直居中 padding margin

本文链接：https://blog.csdn.net/zhangren888/article/details/78605710

版权

CSS|CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于盒子垂直居中的一些小技巧

最近想整理一些关于CSS的知识，把自己学到的分类清理。
本文整理自己了解到的———盒子垂直居中的一些小技巧。

1.给 .outbox 添加一个[ padding：80px 0px; ]（padding-top, padding-bottom）值， .innerbox 处于垂直居中，再添加一个[ padding：80px 50px; ]（padding-left, padding-right）值， .innerbox 处于水平居中。

注：innerbox要有高度（height）或是有内容撑起高度；不能有float: left;position: absolute;，这些属性会导致innerbox高度塌陷，无法撑起父元素的高度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
*{margin: 0;padding: 0;}
.outbox{width: 300px;background: #67F861;margin: 20px auto;padding: 80px 50px;}
.innerbox{height: 200px;background: #5A98F3;}
</style>
</head>
<body>
    <div class="outbox">
        <div class="innerbox"></div>
    </div>
</body>
</html>

2.innerbox有float: left;position: absolute;，这些属性会导致innerbox高度塌陷，无法撑起父元素的高度，给 .outbox 添加一个[ padding：80px 0px; ]（padding-top, padding-bottom）值，给innerbox添加一个margin-top，值是它的高度的1/2，[ margin-top: -25px; ]。或用定位解决。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outbox{
            width: 300px;
            background: #67F861;
            margin: 20px auto;
            padding: 80px 0;
        }
        .innerbox{
            height: 50px;
            width: 50px;
            background: #5A98F3;
            float: left;
            margin-top: -25px;
        }
    </style>
</head>
<body>
    <div class="outbox">
        <div class="innerbox"></div>
    </div>
</body>
</html>

3.outbox添加position: relative;，给innerbox添加margin: auto;position: absolute;top: 0;right: 0;left: 0;bottom: 0;，innerbox一定要给定高度，否则高度是与outbox相同，宽度也同理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outbox{
            width: 300px;
            height: 200px;
            background: #67F861;
            margin: 20px auto;
            position: relative;
        }
        .innerbox{
            height: 50px;
            width: 50px;
            background: #5A98F3;
            margin: auto;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="outbox">
        <div class="innerbox"></div>
    </div>
</body>
</html>

4.用三层div，最外层的div display: table;，内两层div display: table-cell;vertical-align: middle;，innerbox在outbox中居中，innnerbox在innerbox中居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outbox{
            width: 300px;
            height: 200px;
            background: #67F861;
            margin: 20px auto;
            display: table;
        }
        .innerbox{
            display: table-cell;
            vertical-align: middle;
        }
        .innnerbox{
            height: 50px;
            width: 150px;
            background: #5A98F3;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="outbox">
        <div class="innerbox">
            <div class="innnerbox">innnerbox</div>
        </div>
    </div>
</body>
</html>

5.outbox添加position: relative;，给innerbox添加position: absolute;top: 50%;left: 50%;margin-top: -25px;（innerbox高度的1/2），margin-left: -75px;（innerbox宽度的1/2）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outbox{
            width: 300px;
            height: 200px;
            background: #67F861;
            margin: 20px auto;
            position: relative;
        }
        .innerbox{
            height: 50px;
            width: 150px;
            background: #5A98F3;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -75px;
        }
    </style>
</head>
<body>
    <div class="outbox">
        <div class="innerbox">innerbox</div>
    </div>
</body>
</html>

6.outbox添加position: relative;，给innerbox添加position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outbox{
            width: 300px;
            height: 200px;
            background: #67F861;
            margin: 20px auto;
            position: relative;
        }
        .innerbox{
            height: 50px;
            width: 150px;
            background: #5A98F3;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);  
            -ms-transform: translate(-50%,-50%);  
            transform: translate(-50%,-50%); 
        }
    </style>
</head>
<body>
    <div class="outbox">
        <div class="innerbox">innerbox</div>
    </div>
</body>
</html>

7.如果盒子里的内容是img，只需要给img添加一个display: block;也可以实现居中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outbox{
            width: 600px;
            background: #67F861;
            margin: 20px auto;
            padding: 20px;
        }
        img{
            display: block;
        }

    </style>
</head>
<body>
    <div class="outbox">
        <img src="QQ截图20171115090300.png" alt="">
    </div>
</body>
</html>

这里写图片描述

我了解的差不多就这么多了
欢迎指点。
一起讨论，
共同进步。

zhangren888

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于盒子垂直居中的一些小技巧

关于盒子垂直居中的一些小技巧最近想整理一些关于CSS的知识，把自己学到的分类清理。本文整理自己了解到的———盒子垂直居中的一些小技巧。1.给 .outbox 添加一个[ padding：80px 0px; ]（padding-top, padding-bottom）值， .innerbox 处于垂直居中，再添加一个[ padding：80px 50px; ]（padding-left, padd
复制链接

扫一扫