如何在 CSS 中设置组件在浏览器屏幕水平垂直居中

暗诺星刻

于 2022-03-05 00:20:52 发布

阅读量1.5k

点赞数 1

分类专栏：方法/其它教程 JS/TS/HTML/CSS 文章标签： CSS 水平居中垂直居中

本文链接：https://blog.csdn.net/wangpaiblog/article/details/123287960

版权

方法/其它教程同时被 2 个专栏收录

36 篇文章 3 订阅

订阅专栏

JS/TS/HTML/CSS

7 篇文章 0 订阅

订阅专栏

如何在 CSS 中设置组件在浏览器屏幕水平垂直居中

在 CSS 中设置组件在浏览器屏幕水平垂直居中可分解为两个问题，一是设置组件在其父组件的水平垂直居中，二是让其父组件铺满整个屏幕。

对于让最外层组件铺满整个屏幕，这需要将其宽高均设置为 100%。不过这样做了会导致浏览器出现水平和垂直的滑条。这是因为元素 body 会默认有一定的边距 margin，一般为 8px，所以同时还要将元素 body 的边距 margin 设为 0。

对于让组件在父组件中水平垂直居中，方法有很多，这里选择 flex 布局。直接在父组件中设置 flex 布局和水平垂直居中即可。（注意：使用 flex 布局这种方法是在父组件中进行设置。）

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            /* 去掉边距，这里为了去除铺满屏幕后浏览器横竖两边的滑条 */
            margin: 0;
        }

        #outermost {
            /* 下面 3 行代码设置涂满整个屏幕 */
            height: 100%;
            width: 100%;
            position: absolute;

            /* 下面 3 行代码设置子元素横竖均居中 */
            display: flex;
            /*display: -webkit-flex;*/
            /* 设置水平居中 */
            justify-content: center;
            /* 设置垂直居中 */
            align-items: center;

            background: #00ff0d;
        }

        .item {
            width: 50px;
            height: 40px;
            border: 1px solid #00c1b1;
            background: #ffffff;
        }
    </style>
</head>
<body>
<div id="outermost">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
</body>
</html>

运行效果图：

在这里插入图片描述

暗诺星刻

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何在 CSS 中设置组件在浏览器屏幕水平垂直居中

如何在 CSS 中设置组件在浏览器屏幕水平垂直居中在 CSS 中设置组件在浏览器屏幕水平垂直居中可分解为两个问题，一是设置组件在其父组件的水平垂直居中，二是让其父组件铺满整个屏幕。对于让最外层组件铺满整个屏幕，这需要将其宽高均设置为 100%。不过这样做了会导致浏览器出现水平和垂直的滑条。这是因为元素 body 会默认有一定的边距 margin，一般为 8px，所以同时还要将元素 body 的边距 margin 设为 0。对于让组件在父组件中水平垂直居中，方法有很多，这里选择 flex 布
复制链接

扫一扫