前端面试题（17）—— 怎样让一个div水平垂直居中
- 方法一：margin
margin:上下边距 左右边距；
要让div水平居中，就要设置左右边距为auto,自适应；
要让div垂直居中，就要计算上下边距了，垂直居中的上下边距为父容器高度的一半减去子容器高度的一半。
代码如下：
<!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>
*{
margin: 0;
padding: 0;
}
.parent{
height: 500px;
width: 500px;
background-color: green;
border: 1px solid green;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
margin: 150px auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
效果图如下：
- 方法二：绝对定位
只要让子容器开启绝对定位，并且left、right、top、bottom全为0，margin:auto就能实现div水平垂直居中了。
代码如下：
<!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>
*{
margin: 0;
padding: 0;
}
.parent{
height: 400px;
width: 400px;
background-color: green;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
效果图如下：
- 方法三：子元素绝对定位父元素相对定位
给父容器开启相对定位，子元素开启绝对定位。
水平居中 left: 50%;margin-left: -150px;
垂直居中 top: 50%;margin-top: -150px;
margin的值是子容器宽度或高度一半的负值
水平方向我们一般使用left,垂直方向一般使用top,以免出现问题。
代码如下：
<!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>
*{
margin: 0;
padding: 0;
}
.parent{
height: 400px;
width: 400px;
background-color: green;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 25%;
top: 25%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
效果图同上。
- 方法四：flex布局
给父容器开启flex布局，父容器就变成flex容器了，子容器就变成flex项目了。
利用flex布局控制项目水平方向和垂直方向排列的属性使div垂直水平居中。
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>
*{
margin: 0;
padding: 0;
}
.parent{
height: 400px;
width: 400px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
效果图同上。
————————————————
版权声明：本文为CSDN博主「Maple-Ning」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_57443373/article/details/120179047
