盒子设置水平垂直居中

最新推荐文章于 2024-07-03 16:33:21 发布

置顶无意的梦

最新推荐文章于 2024-07-03 16:33:21 发布

阅读量950

点赞数 4

分类专栏： HTML、CSS 文章标签： html html5 css css3

本文链接：https://blog.csdn.net/weixin_46125613/article/details/107892275

版权

HTML、CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.absolute + margin （auto）

居中元素的宽高必须固定，并且需要得知子元素的宽高
这种方式通过设置各个方向的距离都是0，此时再将margin设为auto，即可在各方向上实现居中。

html结构

<body>
	<div class="box">
        <div class="con"></div>
    </div>
</body>

css样式

<style>
    /* 父容器 */
    .box {
        /* 相对定位 */
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #333;
    }

    /* 子容器 */
    .box .con {
        /* 绝对定位 */
        position: absolute;
        /* 偏移量都为0 */
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /* 外边距 */
        margin: auto;
        width: 100px;
        height: 100px;
        background: cyan;
    }
</style>

2.absolute + margin （负值）

利用了绝对定位，绝对定位的百分比是相对于父元素的宽高，所以我们可以根据这个原理将元素居中显示。但是要注意：绝对定位是基于子元素的左上角来说的，但是要想让子元素居中显示，就要解决这个问题。
此时可以利用margin的负值来实现效果，当外边距为负值时，元素向相反方向定位，这样我们将子元素的外边距设置为子元素的宽高的一半就可以实现了。（PS：缺点就是必须得到子元素的宽高）

html

<body>
	<div class="box">
        <div class="con"></div>
    </div>
</body>

<style>
    /* 父容器 */
    .box {
        /* 相对定位 */
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #333;
    }

    /* 子容器 */
    .box .con {
        width: 100px;
        height: 100px;
        background: cyan;
        /* 绝对定位 */
        position: absolute;
        /* 偏移量 50%*/
        left: 50%;
        top: 50%;
        /* 外边距 - 盒子宽/高一般*/
        margin-left: -50px;
        margin-top: -50px;
    }
</style>

3.absolute 和 calc方法

子元素的宽高已知，利用css3具有计算属性，top的百分比是基于元素左上角减去宽度的一半即可（PS：calc属性存在兼容性问题）

注：calc方法运算符两边必须要有空格

html

<body>
	<div class="box">
        <div class="con"></div>
    </div>
</body>

<style>
    /* 父容器 */
    .box {
        /* 相对定位 */
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #333;
    }

    /* 子容器 */
    .box .con {
        width: 100px;
        height: 100px;
        background: cyan;
        /* 绝对定位 */
        position: absolute;
        /* 偏移量 50% - 子元素宽/高的一半*/
        left: calc(50% - 50px);
        top: calc(50% - 50px);
    }
</style>

4.absolute + transform （translate）

（效果一）子元素可不设置宽高
（效果二）子元素设置宽高
注：使用了2d属性的位移实现（存在兼容性问题）

html

<body>
	<div class="box">
        <div class="con"></div>
    </div>
</body>

<style>
    /* 父容器 */
    .box {
        /* 相对定位 */
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #333;
    }

    /* 子容器 */
    .box .con {
        width: 100px;
        height: 100px;
        background: cyan;
        /* 绝对定位 */
        position: absolute;
        /* 偏移量 50%*/
        left: 50%;
        top: 50%;
        /* 2d位移 */
        transform: translate(-50%, -50%);
    }
</style>

5.flex弹性盒

flex是现代的布局方案仅仅需要几行代码即可实现居中效果，代码简洁。
注：-。- 好用的东西都存在兼容性问题。

html

<body>
	<div class="box">
        <div class="con"></div>
    </div>
</body>

<style>
    /* 父容器 */
    .box {
        /* 设置弹性布局 默认x轴为主轴*/
        display: flex;
        /* 子元素主轴居中 */
        justify-content: center;
        /* 子元素侧轴居中 */
        align-items: center;

        width: 300px;
        height: 300px;
        border: 2px solid #333;
    }

    /* 子容器 */
    .box .con {
        width: 100px;
        height: 100px;
        background: cyan;
    }
</style>

6.line-height + display（inline-block）

此方法利用内联元素的特性，结合相关属性实现水平垂直居中。（参考代码注释）

html

<body>
    <div class="box">
        <div class="con">文字</div>
    </div>
</body>

<style>
    /* 父容器 */
    .box {
        width: 300px;
        height: 300px;
        border: 2px solid #333;
        /* 设置行高为父容器高度 */
        line-height: 300px;
        /* 设置内容垂直居中，子元素继承此属性 */
        text-align: center;
        /* 用于解决两个内联元素之间的间距问题 */
        font-size: 0;
    }

    /* 子容器 */
    .box .con {
        width: 100px;
        height: 100px;
        background: cyan;
        font-size: 12px;
        /* 设置为行内块元素 */
        display: inline-block;
        /* 垂直居中 */
        vertical-align: middle;
        /* initial设置为行高的默认值, 默认继承父元素的行高 */
        line-height: initial;
    }
</style>

7.display（table-cell）

css新增的table属性，可以把普通元素改变为table元素的显示效果，也可以实现水平居中。

html

<body>
    <div class="box">
        <div class="con">文字</div>
    </div>
</body>

<style>
    /* 父容器 */
    .box {
        width: 300px;
        height: 300px;
        border: 2px solid #333;
        /* 设置元素的作为一个单元格显示 */
        display: table-cell;
        /* 内容水平居中 */
        text-align: center;
        /* 内容垂直居中 */
        vertical-align: middle;
    }

    /* 子容器 */
    .box .con {
        width: 100px;
        height: 100px;
        background: cyan;
        /* 转换为行内块元素 */
        display: inline-block;
    }
</style>

总结

每种方法各有利弊，根据需求选择；
推荐使用1、4、5；
以上为元素居中的常用方法；
欢迎进行补充；

无意的梦

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
盒子设置水平垂直居中

目录1.absolute + margin （auto）2.absolute + margin （负值）3.absolute 和 calc方法4.absolute + transform （translate）5.flex弹性盒6.line-height + display（inline-block）7.display（table-cell）总结1.absolute + margin （auto）居中元素的宽高必须固定，并且需要得知子元素的宽高这种方式通过设置各个方向的距离都是0，此时再将margin
复制链接

扫一扫