1. flex
使用弹性盒子布局,只需要给待处理的块状元素的父元素添加属性:
/* 弹性盒子布局 */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
该方案在实际开发中应用颇多,也比较简单直观,不需要确定子盒子宽高就可以实现。
实例代码,复制即可查看效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: orangered;
/* 弹性盒子布局 */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.test-div {
height: 100px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<section class="box">
<div class="test-div"></div>
</section>
</body>
</html>
效果:
2. position (需要确定子元素宽高)
- 父元素设置为相对定位:
position: relative
;子元素设置为绝对定位:position: absolute
- 子元素设置top和left为50%:
top: 50%; left: 50%;
- 子元素设置
margin-left
和margin-top
为自身宽高一半的负值:margin-left: -50px; margin-top: -50px;
(自身宽高为height: 100px; width: 100px;
)
实例代码,复制即可查看效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: rgb(201, 211, 58);
/* 父盒子 相对定位 */
position: relative;
}
.test-div {
height: 100px;
width: 100px;
background-color: rgb(211, 18, 98);
/* 子盒子 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<section class="box">
<div class="test-div"></div>
</section>
</body>
</html>
效果:
3. position + transform 元素平移
只需将上面例子中的:子元素设置margin-left
和margin-top
为自身宽高一半的负值
替换为:transform: translate(-50%,-50%);
即:
- 父元素设置为相对定位:
position: relative
;子元素设置为绝对定位:position: absolute
- 子元素设置top和left为50%:
top: 50%; left: 50%;
- 子元素设置transform为 translate(-50%,-50%):
transform: translate(-50%,-50%);
这个方法比较特殊,虽说只改了一行代码,但是原理是什么?只是背一行代码就会显得十分草率。
所以再放实例代码之前,我们先来看看这个方法如何实现了水平垂直居中。
transform: translate(x,y);
的语法定义了元素的2D转换,也就是元素移动(平移),讲完这个我们再来看,子元素设置绝对定位,top和left各移动50%后,子元素左上角正好在父盒子的中心,此时还没有实现子元素的水平垂直居中(即子元素的中心点在父盒子的中心,而不是左上角在父盒子中心)。接着往下看:
translate(x,y)
括号里填百分比数据的话,会以本身的长宽做参考,注意,不是以父盒子宽高为参考,这就是该方法最需要理解的一个点。比如,本身的宽为100px,高为100px. 那填translate(50%,50%)
就是向右和向下各移动50px,添加负号就是向着相反的方向移动。移动后的效果就是子元素的中心点在父元素的中心,实现了水平垂直居中。
实例代码,复制即可查看效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: rgb(231, 69, 20);
/* 父盒子 相对定位 */
position: relative;
}
.test-div {
height: 100px;
width: 100px;
background-color: rgb(67, 33, 218);
/* 子盒子 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<section class="box">
<div class="test-div"></div>
</section>
</body>
</html>
效果:
http://www.imooc.com/qadetail/129282
4. position + margin:auto
- 父元素设置为相对定位:
position: relative
;子元素设置为绝对定位:position: absolute
- 子元素设置top、bottom、left和right为0:
top: 0; bottom: 0; left: 0; right: 0;
- 子元素设置margin为auto:
margin: auto;
实例代码,复制即可查看效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: rgb(74, 199, 43);
/* 父盒子 相对定位 */
position: relative;
}
.test-div {
height: 100px;
width: 100px;
background-color: rgb(20, 38, 117);
/* 子盒子 绝对定位 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<section class="box">
<div class="test-div"></div>
</section>
</body>
</html>
效果:
结尾
我是圆圆,如果我的文章对你的学习成长有所帮助,欢迎 点 赞 👍 支持,您的 点 赞 👍 支持是我进行创作和分享的动力!
如果有问题可以留言评论或者私信我,我都会一一解答~笔芯🤞
参考
- https://blog.csdn.net/weixin_44135121/article/details/91430443
- https://blog.csdn.net/qq_39903567/article/details/115263277