子div在父div中居中,方便自己以后查找

最新推荐文章于 2022-08-03 17:01:58 发布

目遇之而成色

最新推荐文章于 2022-08-03 17:01:58 发布

阅读量815

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Web_Student/article/details/105700706

前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了四种方法使子div在父div中居中的CSS技巧，包括绝对布局、万能方式、弹性布局（flex）以及另一种绝对布局的特定用法。内容覆盖了各种场景下的解决方案，特别是强调了使用弹性布局的通用性。

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

子div在父div中居中

方法一（使用绝对布局）：

弊端：必须要知道这个容器的长宽，因为在子元素中的 margin-top:-100px; margin-left:-100px; 这两个样式分别是子元素长、宽的一半

.father {
　　width: 500px;
　　height: 500px;
　　position: relative;
　　background-color: red;
}
 
.son {
　　width: 200px;
　　height: 200px;
　　position: absolute;
　　top: 50%;
　　left: 50%;
　　margin-top: -100px;
　　margin-left: -100px;
　　background-color: black;
}

万能方式二：

仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。//这种方式很好的避免了方式一的弊端，不需要知道自己的长宽，一样可以定位到中间

.father{
　　width: 1000px;
　　height: 600px;
　　position: relative;
　　background-color: red;
}
.son {
　　background-color: #fff;
　　width: 300px;
　　height: 300px;
　　position: absolute;
　　left: 50%;
　　top: 50%;
　　transform: translate(-50%, -50%);
}

万能方法三（使用弹性布局flex） //这种方式比较通用：

这样给父元素设置了三个样式display:flex;(弹性布局) justify-content:center;(内容水平居中) align-items:center; (内容垂直居中) 就可以达到水平、垂直居中的效果

.father {
　　width: 500px;
　　height: 500px;
　　display: flex;
　　justify-content: center;
　　align-items: center;
　　background-color: red;
}
.son {
　　width: 200px;
　　height: 200px;
　　background-color: black;
}

方法四（使用绝对布局） //使用这种方式的要领是：

子绝父相，且子元素要设置以下的样式position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; 就可以达到居中效果

.father {
　　width: 500px;
　　height: 500px;
　　position: relative;
　　background-color: red;
}
 
.son {
　　width: 200px;
　　height: 200px;
　　position: absolute;
　　top: 0;
　　right: 0;
　　bottom: 0;
　　left: 0;
　　margin: auto;
　　background-color: black;
}