1.通过子绝父相定位+transform让盒子居中
我们都知道,定位的top和left值的100%的值是父盒子的宽高值,所以我们给它50%的值都各占一半
代码如下
<!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>盒子居中</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>效果如下:
此时,我们的子盒子并没有上下居中对齐,那怎么办呢,现在我们学习一个属性 :transform 我们本次使用的属性值为:
transform: translateY(-50%);
transform: translateX(-50%);
translateY的意思是当前的盒子向y轴移动,移动的参考值是盒子本身,比如这个盒子的本身的宽度为100px,那么,transform的100%==100px ,那么,50%就是移动盒子的一半,因为定位的位置是取决于盒子的左上角的位置,所以我们给它移动子盒子的一半,那么现在y轴就居中了,x轴道理也是一样的,
什么叫x轴？什么又是 y轴_百度知道
代码如下:
<!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>盒子居中</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
/*
注意:第二次写transform的属性的时候在后面加就行了,再多写一次会覆盖,
也可以简写:transform:translate(-50%,-50%) 第一个值是x轴,第二个值是x轴
*/
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>效果如下:
这样子我们的盒子就居中了
第二种就是使用定位+margin实现居中
代码如下
<!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>盒子居中</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>效果图如下:
这样子也是可以实现盒子居中的,怎么理解呢,我们先给定位到子盒子,margin是外边距,它的这个外边距不是像是transform一样是根据子盒子的大小来进行参考的,比如我的子盒子的宽高为100px所以我们直接给它 margin-top:-50px margin-left:-50px 这样子的话,盒子会向上和左移动自己本身的一半,也能实现盒子居中
3.使用flex实现居中,也是实际开发最实用的一个样式,开搞:
display: flex; //设置flex属性
justify-content: center; //主轴方向居中,就是x轴
align-items: center; //副轴方向居中,就是y轴,哎,就是那么简单
代码如下:
<!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>盒子居中</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>效果图如下:
