盒子居中也是我们代码功能实现的很重要的一个部分,下面来介绍一下三种解决办法
1.定位的盒子垂直水平居中,使用margin或者transform移动盒子
2.弹性盒子布局,使用主轴和副轴的对齐方式使盒子居中
3.绝对定位,上下左右都为0,使用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>
.father {
position: relative; /* 父相 */
width: 400px;
height: 300px;
border: 1px solid red;
margin: 100px auto;
}
.son {
position: absolute; /* 子绝 */
top: 50%;
left: 50%;
/* 第一种 */
/* margin-top: -50px; */
/* margin-left: -50px; */
/* 第二种 */
transform: translateX(-50px) translateY(-50px);
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
父元素采用了相对定位,子元素采用了绝对定位,并使用了两种方式实现垂直和水平居中。
第二种方式:
<!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>
.father {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 100px auto;
/* 使用弹性盒子解决 */
display: flex;
justify-content: center;
align-items: center;
}
.son {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
父元素采用了弹性盒子的方式去解决子元素的居中问题。使用了
display: flex;
justify-content: center;
align-items: center;
属性来实现垂直和水平居中。可以帮助理解HTML和CSS的弹性盒子布局的基本知识
第三种方式:
<!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 {
/* 使用绝对定位 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* margin: auto;上下左右居中 */
margin: auto;
/* 写宽、高度才能居中 */
width: 200px;
height: 200px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
采用了绝对定位和 margin: auto 属性来实现元素的水平和垂直居中。通过设置
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
属性使元素占满整个父容器,然后使用margin: auto;
来水平和垂直居中元素。另外,必须设置元素的宽和高,才能使用margin: auto;
属性来居中元素。可以帮助理解HTML和CSS如何使用绝对定位和margin: auto属性居中元素。