HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
将块级元素垂直水平居中分两种情况：
1、元素尺寸固定
2、元素尺寸不固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
position: relative;
height: 200px;
width: 200px;
margin-right: 20px;
border: 1px solid black;
float: left;
}
.box1 {
width: 50px;
height: 50px;
border: 1px solid red;
/* 把元素变成定位元素 */
position: absolute;
/* 元素距离上，左都为50% */
left: 50%;
top: 50%;
/* 让元素的左外边距，上外边距为元素宽高的1/2 注意margin是负距*/
margin-top: -25px;
margin-left: -25px;
}
.box2 {
width: 50px;
height: 50px;
border: 1px solid red;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.box3 {
width: 50px;
height: 50px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
/* 设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)*/
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
</div>
<div class="wrapper">
<div class="box2"></div>
</div>
<div class="wrapper">
<div class="box3"></div>
</div>
</body>
</html>
