https://www.bilibili.com/video/av17456924/?p=1
元素的垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
.d1{
width: 500px;
height: 500px;
border: 3px dashed green;
/* 仅适用单行文本 定义行高=元素内容高度 （包含边框 内边距）*/
line-height: 494px;
}
.d2{
width: 800px;
height: 800px;
border: 3px dashed green;
line-height: 799px;
}
/* 块级元素垂直居中1. top+margin-top搭配，position:relative*/
.d3{
width: 400px;
height: 400px;
border: 3px dashed blue;
}
.c1{
width: 100px;
height: 100px;
background-color: palegreen;
position: relative;
top: 50%;
margin-top: -50px;
}
/* 块级元素垂直居中2. 父元素的display改为table-cell，并添加垂直居中vertical-align：middle；*/
.d4{
width: 400px;
height: 400px;
border: 3px dashed blue;
display: table-cell;
vertical-align: middle;
}
.c2{
width: 100px;
height: 100px;
background-color: palegreen;
}
</style>
</head>
<body>
<!-- 单行文本、单个内联元素垂直居中 -->
<div class="d1">
fslajfklsjdlajf
</div>
<!-- 图片的水平居中 -->
<div class="d2">
<img src="detection.png">
</div>
<!-- 块级元素 -->
<div class="d3">
<div class="c1"></div>
</div>
<div class="d4">
<div class="c2"></div>
</div>
</body>
</html>元素的水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
.d1{
width: 500px;
height: 500px;
border: 3px dashed green;
/* 仅适用单行文本 定义行高=元素内容高度 （包含边框 内边距）*/
text-align: center;
}
.d2{
width: 800px;
height: 800px;
border: 3px dashed green;
/* 1.在父元素上面加上 text-align：center */
/* text-align: center; */
}
/* 2.在要查询的图片上添加 top+margin-top搭配，position:relative*/
.d2 img{
position: relative;
left: 50%;
margin-left: -246px;
}
/* 3.图片宽度不知道 display也不是inline*/
.d3{
width: 800px;
height: 800px;
border: 3px dashed blue;
}
.d3 img{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 单行文本、单个内联元素水平居中 -->
<div class="d1">
fslajfklsjdlajf
</div>
<!-- 图片的水平居中 -->
<div class="d2">
<img src="detection.png">
</div>
<!-- 块级元素 -->
<div class="d3">
<img src="detection.png">
</div>
</body>
</html>