第一种: 绝对定位 ,在不确定div的宽高的情况下,使用transform:translate(-50%,-50%);
translate(x,y),第一个值表示x轴上的移动,第二个值表示y轴上的移动。
取正值表示向右和向下移动;取负值表示向左和向上移动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.child{
width: 200px;
height: 200px;
background-image: linear-gradient(pink,skyblue);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<div class="child">
</div>
</div>
</body>
</html>
运行效果:
第二种: 绝对定位 ,在确定div的宽的情况下使用,margin值为当前div宽度的一半的负值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.child{
width: 200px;
height: 200px;
background-image: linear-gradient(pink,skyblue);
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
</div>
</div>
</body>
</html>
运行效果:
第三种: margin:auto ,四个值(top,left,right,bottom)都设为0,margin设为auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.child{
width: 200px;
height: 200px;
background-image: linear-gradient(pink,skyblue);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
</div>
</div>
</body>
</html>
运行效果:
第四种: 弹性盒布局 ,display设为flex(在父级元素上设置)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
height: 400px;
width: 400px;
background-color: #D5A4CF;
/*弹性盒布局*/
display: flex;
/* 子元素水平对齐方式 */
justify-content: center;
/* 子元素垂直对齐方式 */
align-items: center;
}
.child{
width: 200px;
height: 200px;
background-image: linear-gradient(pink,skyblue);
}
</style>
</head>
<body>
<div class="box">
<div class="child">
</div>
</div>
</body>
</html>
运行效果:
第五种: 表格法 tabel-cell 会受到float和position的影响,应尽量避免一起使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-image: linear-gradient(pink,skyblue);
display: table-cell;
/* 子元素垂直居中对齐 */
vertical-align: middle;
}
.child{
width: 100px;
height: 100px;
background-color: #D5A4CF;
/* 水平居中对齐*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
</div>
</div>
</body>
</html>
运行效果: