元素的水平垂直居中经常在项目中用到，根据元素有无固定尺寸分两种情况进行下汇总，直接上代码复制粘贴即可
【1】子元素尺寸固定
(1)定位法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
width: 100%;
height: 100vh;
background-color: green;
}
.son{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="father">
<!-- 图片同样适用 -->
<!-- <img class="son" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1438475101,354016904&fm=58" alt=""> -->
<div class="son">
</div>
</div>
</body>
</html>
(2)flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
width: 100%;
height: 100vh;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<!-- 图片同样适用 -->
<!-- <img class="son" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1438475101,354016904&fm=58" alt=""> -->
<div class="son">
</div>
</div>
</body>
</html>
【2】子元素尺寸不固定
(1)transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
width: 100%;
height: 100vh;
background-color: green;
}
.son{
/*有尺寸但是不是固定的px*/
width: 50%;
height: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<!-- 图片同样适用 -->
<!-- <img class="son" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1438475101,354016904&fm=58" alt=""> -->
<div class="son">
</div>
</div>
</body>
</html>
(2)使用伪元素 利用inline-block与vertical-align配合伪元素达到垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style>
*{
margin:0;
padding:0;
}
.father{
width: 100%;
height: 100vh;
background-color: green
}
.father:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
.son{
/*有尺寸但是不是固定的px*/
width: 50%;
height: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: red;
}
</style>
<body>
<div class="father">
<!-- <img class="son" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1438475101,354016904&fm=58" alt=""> -->
<div class="son">
</div>
</div>
</body>
</html>
网友评论