CSS盒子垂直居中

Mbappeㅤ

已于 2023-08-30 16:07:48 修改

阅读量541

点赞数

文章标签： css html css3

于 2023-06-06 19:18:47 首次发布

本文链接：https://blog.csdn.net/MDCG99/article/details/131074275

版权

弹性盒布局

弹性盒布局，给父元素设置flex，此时子元素变为弹性子元素。

<style>
        /* 1.弹性盒布局 给父元素设置flex*/
        .box {
            width: 600px;
            height: 600px;
            border: 2px solid red;
            display: flex;
            /* 弹性盒子元素在主轴（横轴）方向上居中。 */
            justify-content: center;
            /* 弹性盒子元素在该行的侧轴（纵轴）方向上居中。 */
            align-items: center;
        }

        /* 此时子元素变为弹性子元素 */
        .box1 {
            width: 120px;
            height: 120px;
            background-color: aqua;
        }
</style>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

table-cell实现垂直居中的方法

给父级元素添加table-cell（如果父元素使用了定位，则 vertical-align: middle垂直方向的垂直居中不发生作用）

/* 2.将父元素转变为表格， */
    <style>
        .box {
            width: 600px;
            height: 600px;
            border: 2px solid red;
            display: table-cell;
            text-align: center;
            /* 子元素的垂直对齐方式。 */
            vertical-align: middle;
        }

        /* 子元素水平居中 */
        .box1 {
            width: 120px;
            height: 120px;
            background-color: aqua;
            /* margin 水平居中 */
            margin: 0 auto;
            /* 转换为内联块级元素 也能实现水平居中*/
            /* display: inline-block; */
        }
    </style>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
    </body>

脱离文档流元素的居中

1.常用margin：auto 子绝父相。

/* 1.margin：auto  子绝父相*/
    <style>
        .box {
            width: 600px;
            height: 600px;
            border: 2px solid red;
            /* 相对定位 */
            position: relative;
        }

        .box1 {
            width: 120px;
            height: 120px;
            background-color: aqua;
            /* 绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
    </body>

2.子元素的宽高

在已知子元素宽高的情况下

 <style>
        .box {
            width: 600px;
            height: 600px;
            border: 2px solid red;
            position: relative;
        }

        .box1 {
            width: 120px;
            height: 120px;
            background-color: aqua;
            position: absolute;
            /* 定位元素的left/top等是相对于父元素的宽高的 */
            top: 50%;
            left: 50%;
            /* 绝对定位后子元素所在位置，水平方向离水平居中多往右移动了宽度（子元素）的一半 */
            /* 垂直方向离垂直居中多往下移动了高度（子元素）的一半 */
            /* 已知宽高的情况下 */
            margin-top: -60px;
            margin-left: -60px;
        }
    </style>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
    </body>

3.transform设置盒子居中

使用transform: translate设置盒子居中。

    <style>
        .box {
            width: 600px;
            height: 600px;
            border: 2px solid red;
            position: relative;
        }
        .box1 {
            width: 120px;
            height: 120px;
            background-color: aqua;
            position: absolute;
            /* 定位元素的left/top等是相对于父元素的宽高的 */
            top: 50%;
            left: 50%;
            /* transform中的translate获取的是相对于元素本身的宽和高 ,然后进行x轴和y轴的位移*/
            transform: translate(-50%, -50%);
        }
    </style>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
    </body>

auto自适应，只对块级元素有用，对内联元素和内联块级元素无用。