块元素水平/垂直居中对齐的几种方法

最新推荐文章于 2023-12-13 11:32:50 发布

不是本人11

最新推荐文章于 2023-12-13 11:32:50 发布

阅读量9.6k

点赞数 7

分类专栏： css/css3 文章标签：块元素居中对齐

本文链接：https://blog.csdn.net/bozhouyongqi/article/details/85041982

版权

css/css3 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

文章目录

块元素水平或垂直居中是页面中常用的布局，整理如下

1.水平居中对齐

1.1 设置margin:0 auto

{
    margin:0 auto;
}

设置在子元素上

1.2 使用flex布局,设置justify-content

该属性将设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，设置在弹性容器上。

{
    display: flex;
    justify-content: center;
}

2.垂直居中对齐

2.1 使用flex布局，设置align-items

该属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，设置在弹性元素上。

{
    align-items: center;
}

设置在父元素上

2.2 使用absolute布局

{
    position: absolute;
    border: 1px solid black;
    background-color: green;
    width: 300px;
    height: 200px;
    top: 50%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-top: -100px;
}

设置在子元素上

2.3 使用table-cell布局

{
    display: table-cell;
    vertical-align: middle;
}

该布局设置在父元素上。

2.4 使用transform

{
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0px;
    right: 0px;
    transform: translate(-50%, -50%);
    height: 100px;
}

设置在子元素上。

总结

1.使用flex布局，设置align-items和justify-content分别达到垂直和水平居中比较方便，而且可以针对不定宽度和高度的块元素。因为flex定位个人感觉最为方便。

2.table-cell布局也可以实现未知高度块元素的垂直居中。

demo代码

拷贝如下代码保存成.html文档，chrome浏览器打开既能看到效果。


<!DOCTYPE html>

<head>
    <meta charset="utf-8"></mata>
    <style type="text/css">
        .outerContainer {
            border: 1px solid black;
            background-color: red;
            width: 500px;
            height: 300px;
            position: relative;
        }

        .flex-vertical {
            display: flex;
            align-items: center;
        }
        .flex-horizon {
            display: flex;
            justify-content: center;
        }
        .innerContainer {
            border: 1px solid black;
            background-color: green;
            width: 300px;
        }

        .setMargin {
            border: 1px solid black;
            background-color: green;
            width: 300px;
            margin: 0 auto;
        }
        .useAbsolute {
            position: absolute;
            border: 1px solid black;
            background-color: green;
            width: 300px;
            height: 200px;
            top: 50%;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin-top: -100px;
        }
        .table-cell-vertical {
            display: table-cell;
            vertical-align: middle;
        }

        .transform {
            position: absolute;
            top: 50%;
            left: 50%;
            bottom: 0px;
            right: 0px;
            transform: translate(-50%, -50%);
            height: 100px;
        }


    </style>
</head>

<body>
    <div class="outerContainer flex-horizon flex-vertical">
        <div class="innerContainer">
            设置display:flex;align-items:center;justify-content:center;使块元素水平垂直居中对齐；
            <br />
            其中align-items属性控制块元素的垂直对齐方向，justify-content控制块元素的水平对齐方向
        </div>
    </div>

    <div class="outerContainer">
        <div class="setMargin">
            设置margin:0 auto;使块元素水平居中对齐
        </div>
    </div>
    
    <div class="outerContainer">
        <div class="useAbsolute">
            使用absolute定位，这种适合用在内部元素的高度固定的情况。同时可以设置margin:0 auto;使其水平居中；
        </div>
    </div>

    <div class="outerContainer table-cell-vertical">
        <div class="innerContainer">
            将父元素display设置为table-cell.要需要水平居中，还可以将子元素设置为inline-block，然后设置
            text-align：cneter使子元素水平居中。
        </div>
    </div>

    <div class="outerContainer">
        <div class="innerContainer transform">
            使用transform水平垂直居中
        </div>
    </div>
</body>

不是本人11

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
块元素水平/垂直居中对齐的几种方法

文章目录块元素水平或垂直居中是页面中常用的布局，整理如下1.水平居中对齐1.1 设置margin:0 auto1.2 使用flex布局,设置justify-content2.垂直居中对齐2.1 使用flex布局，设置align-items2.2 使用absolute布局2.3 使用table-cell布局2.4 使用transform总结demo代码块元素水平或垂直居中是页面中常用的布局，整理如...
复制链接

扫一扫