div垂直居中

最新推荐文章于 2022-07-16 13:57:03 发布

转载最新推荐文章于 2022-07-16 13:57:03 发布 · 317 阅读

html+css 专栏收录该内容

113 篇文章

订阅专栏

本文介绍了四种不同的CSS方法来实现子元素在父元素内的水平和垂直居中，包括使用绝对定位、table-cell显示方式、Flexbox布局及调整margin值。

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

方法1：

.parent {

          width:800px;

          height:500px;

          border:2px solid #000;

          position:relative;

}

 .child {

            width:200px;

            height:200px;

            margin: auto;  

            position: absolute;  

            top: 0; left: 0; bottom: 0; right: 0; 

            background-color: red;

}

方法2：

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            display:table-cell;

            vertical-align:middle;

            text-align: center;

        }

        .child {

            width:200px;

            height:200px;

            display:inline-block;

            background-color: red;

        }

方法3：

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            display:flex;

            justify-content:center;

            align-items:center;

        }

        .child {

            width:200px;

            height:200px;

            background-color: red;

        }

方法4：

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            position:relative;

        }

        .child {

            width:300px;

            height:200px;

            margin:auto;

            position:absolute;/*设定水平和垂直偏移父元素的50%，

再根据实际长度将子元素上左挪回一半大小*/

            left:50%;

            top:50%;

            margin-left: -150px;

            margin-top:-100px;

            background-color: red;

        }