div盒子垂直水平居中的六种方式

挪威森霖

已于 2022-10-31 17:50:41 修改

阅读量1k

点赞数 3

分类专栏：前端文章标签： css css3

于 2021-02-22 14:44:27 首次发布

本文链接：https://blog.csdn.net/qq_37384271/article/details/113937909

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

博主目前在蚂蚁集团-体验技术部，AntV/S2 是博主所在团队的开源项目——多维交叉分析表格，欢迎使用，感谢到 S2 github 仓库点赞 star，有任何关于前端面试、就业、技术问题都可给在文章后留言。

1、盒子宽度和高度是已知的。思路：

父元素相对定位；
子元素绝对定位；
left: 50%; top: 50%;
margin-left: 负的一半宽度; margin-top: 负的一半高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子垂直水平居中demo1</title>
    <style type="text/css">
        html,body {
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .box {
            height: 150px;
            width: 300px;
            background-color: antiquewhite;
            border: 2px solid #000;
            line-height: 146px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="box">
        盒子垂直水平居中
    </div>
</body>
</html>

2、盒子宽度和高度是未知的（有高、宽，但是不知道）。思路：

父元素相对定位；
子元素绝对定位；
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子垂直水平居中demo2</title>
    <style type="text/css">
        html,body {
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .box {
            height: 150px;
            width: 300px;
            background-color: antiquewhite;
            border: 2px solid #000;
            line-height: 146px;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        盒子垂直水平居中
    </div>
</body>
</html>

3、平移：定位 + transform。思路：

父元素相对定位；
子元素绝对定位；
top: 50%; left: 50%;
transform: translate(-50%, -50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子垂直水平居中demo3</title>
    <style type="text/css">
        html,body {
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .box {
            background-color: antiquewhite;
            border: 2px solid #000;
            line-height: 146px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="box">
        盒子垂直水平居中
    </div>
</body>
</html>

4、flex 布局。思路：

在父级元素中采用flex布局：display: flex; justify-content: center; align-items: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子垂直水平居中demo4</title>
    <style type="text/css">
        html,body {
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box {
            height: 150px;
            width: 300px;
            background-color: antiquewhite;
            border: 2px solid #000;
            line-height: 146px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        盒子垂直水平居中
    </div>
</body>
</html>

5、父元素：display: table-cell 布局。思路：

父元素：display: table-cell; vertical-align: middle; text-align: center;
父元素有固定的宽高；
子元素：display: inline-block；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子垂直水平居中demo6</title>
    <style type="text/css">
        .box1 {
            height: 300px;
            width: 600px;
            background-color: blue;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            overflow: hidden;
        }
        .box2 {
            display: inline-block;
            height: 150px;
            width: 300px;
            background-color: antiquewhite;
            border: 2px solid #000;
            line-height: 146px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            盒子垂直水平居中
        </div>
    </div>
</body>
</html>

6、通过JavaScript的方式。思路：

父元素相对定位；
子元素绝对定位；
获取父元素的 clientHeight 和 clientWidth；
获取子元素的 offsetHeight 和 offsetWidth；
计算子元素的 top 和 left。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子垂直水平居中demo6</title>
    <style type="text/css">
        html,body {
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .box {
            height: 150px;
            width: 300px;
            background-color: antiquewhite;
            border: 2px solid #000;
            line-height: 146px;
            text-align: center;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        盒子垂直水平居中
    </div>
    <script type="text/javascript">
        let HTML = document.documentElement,
            winH = HTML.clientHeight,
            winW = HTML.clientWidth,
            boxH = box.offsetHeight,
            boxW = box.offsetWidth;
        box.style.top = (winH - boxH) / 2 + "px";
        box.style.left = (winW - boxW) / 2 + "px";
    </script>
</body>
</html>

博主水平有限，若发现文中存在问题，欢迎留言指正！

学习之路永无止境！

挪威森霖

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
div盒子垂直水平居中的六种方式

1、盒子宽度和高度是已知的。思路：父元素相对定位；子元素绝对定位；left: 50%; top: 50%;margin-left: 负的一半宽度; margin-top: 负的一半高度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
复制链接

扫一扫