第一种
绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中方式1</title>
<style>
/*使用绝对定位,不确定子div的宽高,父元素需要添加position:relative*/
.father {
background: red;
position: relative;
width: 500px;
height: 500px;
}
.son {
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son">hello simon</div>
</div>
</body>
</html>
第二种
绝对定位方法:确定了当前div的宽度,margin值为当前div宽度一半的负值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中方式2</title>
<style>
/*使用绝对定位,确定了子div的宽高,margin值为子div宽高的一半的负值*/
.father {
background: red;
position: relative;
width: 500px;
height: 500px;
}
.son {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">hello simon</div>
</div>
</body>
</html>
第三种
绝对定位方法:绝对定位下top left right bottom 都设置0 ,margin设置为auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中方式3</title>
<style>
/*使用绝对定位,确定了子div的宽高,left、right、top、bottom都设置为0,margin设置为auto*/
.father {
background: red;
position: relative;
width: 500px;
height: 500px;
}
.son {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son">hello simon</div>
</div>
</body>
</html>
第四种
flex布局方法:当前div的父级添加flex css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中方式4</title>
<style>
/*使用flex布局,为父div添加flex布局样式align-items和justify-content*/
.father {
background: red;
position: relative;
width: 500px;
height: 500px;
-webkit-display: flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.son {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son">hello simon</div>
</div>
</body>
</html>
第五种
table-cell实现水平垂直居中: table-cell middle center组合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中方式5</title>
<style>
/*table-cell、vertical-align、text-align组合使用*/
/*子div只能不能是块状元素,否则只能垂直居中,无法水平居中*/
.father {
width: 500px;
height: 500px;
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: red;
}
.son {
width: 200px;
height: 200px;
background-color: green;
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">hello simon</div>
</div>
</body>
</html>
第六种
绝对定位:calc() 函数动态计算实现水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中方式6</title>
<style>
.father {
position: relative;
border: 1px solid #f40;
background-color: #f30;
width: 80vw;
height: 80vh;
}
.son {
position: absolute;
width: 30vw;
height: 30vh;
background-color: #ff0;
left: -moz-calc((80vw - 30vw)/2);
top: -moz-calc((80vh - 30vh)/2);
left: -webkit-calc((80vw - 30vw)/2);
top: -webkit-calc((80vh - 30vh)/2);
left: calc((80vw - 30vw)/2);
top: calc((80vh - 30vh)/2);
}
</style>
</head>
<body>
<!--绝对定位+calc()动态计算实现水平垂直居中-->
<div class="father">
<div class="son">
hello simon
</div>
</div>
</body>
</html>