* {
margin: 0;
padding: 0;
}
.box1 {
float: left;
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box2 {
/* float: left; */
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son2 {
display: inline-block;
}
.box3 {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
margin-top: -1px;
}
.son3 {
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
上面是css代码,放在哪里就不用多说了,接着是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现盒子居中的三种方式</title>
</head>
<body>
<div class="box1">
<div class="son1">盒子1</div>
</div>
<div class="box2">
<div class="son2">盒子2</div>
</div>
<div class="box3">
<div class="son3">盒子3</div>
</div>
</body>
</html>
附上结果图
说一下原理:第一种是利用定位和c3中的属性transform移动自身的-50%,来实现居中效果,不用考虑自身宽高;
第二种是把父级盒子转换成table-cell模式.也就是单元格模式,然后水平居中,垂直居中(就是图片居中的vertical-align: middle),子盒子设置成行内块模式,前提是父子级盒子都必须指明宽高;
第三种方式,是利用的子绝父相定位,子盒子定位使用margin:auto;自动适应,然后top,left,right,bottom都设置为零(方法有点偏门);
另外,还有一些方式,提及一下;
1 > .移动端flex布局中有设置Y轴为主轴的方式,还有就是垂直和水平居中,同样能让盒子水平垂直居中.
2 > . js中同样有些方法能在不知道父盒子和子盒子的宽高的情况下,返回拥有实际宽高度的盒子的宽和高,然后子绝父相,通过js做简单的运算,移动到某个位置,同样能实现水平居中和垂直居中的效果,但是方法很奇葩,了解就行...
原文地址：https://www.cnblogs.com/liuyuexue520/p/12121547.html
时间： 2024-10-08 07:05:04