垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中</title>
<style>
</style>
</head>
<body>
<!-- 使用table-cell+vertical-align -->
<div style="display:table-cell;vertical-align:middle;height:30px">
<div >使用table-cell+vertical-align</div>
</div>
<!-- 使用absolute+transform -->
<div style="position:relative;height:30px;">
<div style="position:absolute;top:50%;transform:translateY(-50%);">使用absolute+transform</div>
</div>
<!-- 使用flex+align-items -->
<div style="display: flex;align-items:center;height:30px;">
<div >使用flex+align-items</div>
</div>
</body>
</html>
水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中</title>
<style>
/* .parent1 {
text-align: center;
}
.child1 {
display: inline-block;
}
.child2 {
display: table;
margin: 0 auto;
}
.parent3 {
display: flex;
}
.child3 {
margin: 0 auto;
}
.parent4 {
display: flex;
justify-content:center;
} */
</style>
</head>
<body>
<!-- 使用inline-block+text-align -->
<div class="parent1" style="text-align: center;">
<div class="child1" style="display: inline-block;">使用inline-block+text-align</div>
</div>
<!-- 使用table+margin -->
<div class="parent2" >
<div class="child2" style="display: table; margin: 0 auto;">使用table+margin</div>
</div>
<!-- 使用text-align+margin -->
<div >
<div style="text-align:center; margin: 0 auto;">使用text-align+margin</div>
</div>
<!-- 使用flex+margin -->
<div class="parent3" style="display: flex;">
<div class="child3" style="margin: 0 auto;">使用flex+margin</div>
</div>
<!-- 使用flex+justify-content -->
<div class="parent4" style="display: flex;justify-content:center;">
<div class="child4" >使用flex+justify-content</div>
</div>
<!-- 使用absolute+transform -->
<div style="position:relative;">
<div style="position:absolute;left:50%;transform:translateX(-50%);">使用absolute+transform</div>
</div>
</body>
</html>
水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中</title>
<style>
</style>
</head>
<body>
<!--使用absolute+transform-->
<div style="position:relative;height:30px;">
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">使用absolute+transform</div>
</div>
<!--使用absolute+margin-->
<div style="position:relative;height:30px;">
<div style="position:absolute;top:50%;left:50%;margin:-10px 0 0 -69px">使用absolute+transform</div>
</div>
<!-- flex+justify-content+align-items -->
<div style="display: flex;align-items:center;justify-content:center;height:30px;">
<div >使用flex+align-items</div>
</div>
<!--使用absolute+top/bottom/right/left+height/width-->
<div style="position:relative;height:100px">
<div style="position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;height:50px;width:100px;">使用absolute+top/bottom/right/left+height/width</div>
</div>
</body>
</html>
