div的水平垂直居中

最新推荐文章于 2023-08-25 16:13:40 发布

一个蛋挞

最新推荐文章于 2023-08-25 16:13:40 发布

阅读量264

点赞数

分类专栏： h5+css3 文章标签： css html

本文链接：https://blog.youkuaiyun.com/cflsh/article/details/109880111

版权

h5+css3 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了div实现水平垂直居中的四种方法：1) 使用flex布局；2) 父元素定位，子元素绝对定位；3) 子元素绝对定位，边距自动；4) 子元素设置左右上角外边距为父元素宽高的一半。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div水平垂直居中的方法多种多样
图示：
在这里插入图片描述下面展示一些 内联代码片。

<body>
    <div id="parent">
        <div id="child"></div>
    </div>
</body>

方法一：使用flex布局

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        #parent {
            width: 400px;
            height: 400px;
            background-color: aqua;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        #child {
            width: 200px;
            height: 200px;
            background-color: bisque;

        }
    </style>

方法二：在父元素设置定位元素，在子元素使用绝对定位，相对于父元素进行定位，设置top和left属性，可以使用经过计算后的值或者百分比。

<style>
        * {
            margin: 0;
            padding: 0;
        }

        #parent {
            width: 400px;
            height: 400px;
            background-color: aqua;
            margin: 0 auto;
            position: relative;

        }

        #child {
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            /* top: 100px;
            left: 100px; */
            top: 25%;
            left: 25%;

        }
    </style>

方法三：在子元素使用绝对定位元素，设置top,left,right,bottom的值为0，margin:auto;

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        #parent {
            width: 400px;
            height: 400px;
            background-color: aqua;
            margin: 0 auto;
            position: relative;

        }

        #child {
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;

        }
    </style>