css设置标签的水平与垂直居中，定位与弹性盒布局的的结合

最新推荐文章于 2024-02-27 16:51:47 发布

置顶反派都是哲学家

最新推荐文章于 2024-02-27 16:51:47 发布

阅读量1w

点赞数 4

分类专栏： web-css 文章标签： css-弹性盒布局标签水平垂直居中布局

本文链接：https://blog.csdn.net/wulihuihui/article/details/52654220

版权

web-css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在一般情况下利用css在对标签进行水平与垂直居中的时候利用弹性盒布局可以轻易解决，只需设置父级标签的主轴与交叉轴居中即可，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .out {
                width: 500px;
                height: 300px;
                background: red;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
            }
            .out .in {
                width: 100px;
                height: 100px;
                background: white;
            }
        </style>
    </head>
    <body>
        <div class="out">
            <div class="in">

            </div>
        </div>
    </body>
</html>

效果图如下：
一般的弹性盒布局水平与垂直居中
但在很多时候，在做水平与垂直居中时常常伴随着定位的存在，而定位的存在往往使弹性盒布局的效果清除掉，而在很多情况下，我们的网页又是响应式的，对标签做到绝对居中，单靠定位很难实现，或者实现起来很复杂，而这里有一种很方便的方法，其中用到了定位，也用到了弹性和布局的一些内容，具体实现方式如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        body {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            display: flex;
        }
            .out {
                width: 20%;
                height: 20%;
                background: red;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="out">

        </div>
    </body>
</html>

效果图如下：
这里写图片描述
此例子是以body为父级标签，且子标签为流式布局，实现方式即是对父级标签进行定位，且设置：display:flex;在子级标签的设置就相对来说更加简单只需设置margin: auto;即可，原理我也不是太懂，却能实现此效果（是我无意间试出来的，嘿嘿��），具体原理可能还需要我对css有更深入的了解，有谁知到的可以私信或在评论中指出，大家相互学习，共同进步哦��！
—–觉得有用的记得关注哦！！

反派都是哲学家

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css设置标签的水平与垂直居中，定位与弹性盒布局的的结合

在一般情况下利用css在对标签进行水平与垂直居中的时候利用弹性盒布局可以轻易解决，只需设置父级标签的主轴与交叉轴居中即可，代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .o
复制链接

扫一扫