``今天简单说一下元素水平垂直居中的几种方法。
实现效果如下:
元素本身内容水平垂直居中:
元素本身设置:text-align:center; height:60px; line-height:60px;
<!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>
.outer {
background-color: skyblue;
}
.inner {
background-color: bisque;
/* 元素本身内容水平垂直居中 */
text-align: center;
height: 60px;
line-height: 60px;
}
</style>
</head>
<body>
<div>
<div class="outer">
<div class="inner">
内层DIV
</div>
</div>
</div>
</body>
</html>
子元素在父元素中水平垂直居中
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>
.outer {
background-color: skyblue;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
background-color: bisque;
}
</style>
</head>
<body>
<div>
<div class="outer">
<div class="inner">
内层DIV
</div>
</div>
</div>
</body>
</html>
position: absolute;
margin: auto;
2.定位position+transform
父元素设置position: relative;
子元素设置position: absolute; top: 50%; left: 50%; transform: translate(-50%,-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>Document</title>
<style>
.outer {
background-color: skyblue;
height: 100vh;
position: relative;
}
.inner {
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div>
<div class="outer">
<div class="inner">
内层DIV
</div>
</div>
</div>
</body>
</html>
3.定位position+margin:auto
父元素:position: relative;
子元素(需要设置子元素的宽高):width: 10vw; height: 10vh; position: absolute; top: 0; right: 0; left: 0; bottom: 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>
.outer {
background-color: skyblue;
/* width: 100vw; */
height: 100vh;
position: relative;
}
.inner {
background-color: bisque;
width: 10vw;
height: 10vh;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div>
<div class="outer">
<div class="inner">
内层DIV
</div>
</div>
</div>
</body>
</html>