一个div元素在父元素中上下左右居中的方法有哪些？

最新推荐文章于 2024-01-06 17:44:26 发布

原创最新推荐文章于 2024-01-06 17:44:26 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #前端样式 #子元素居中

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现子元素在父元素中上下左右居中的四种方法，包括使用绝对定位、transform属性以及Flex布局，为网页设计提供实用的布局解决方案。

实现一个div子元素(.innerbox)在父元素(.outerbox)中上下左右居中的方法有哪些？

.outerbox{height:300px;width:300px;border:1px solid red;margin:100px auto;position:relative;} /* 父元素*/

.innerbox{ /* 子元素 */

height:100px;width:100px;background:yellow;

/* 方法一 */

position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;

/* 方法二 */

position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;

/* 方法三 */

position:absolute;left:50%;top:50%;transform:translate(-50px,-50px);

}

/* 方法四 */

.outerbox{height:300px;width:300px;border:1px solid red;margin:100px auto; /* 父元素 */

display:flex;justify-content:center;align-items:center;}

.innerbox{height:100px;width:100px;background:red;} /* 子元素 */