方法一：使用绝对定位和translate函数
效果图：
代码块：
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
/* 方法一 */
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div></div>
</body>
</html>方法一的描述
在body属性中定义一个div块级元素
在style属性中对样式进行设置，从而达到上图效果：
使用通配符选择器*,匹配文档中的所有元素，对所有元素应用margin:0和padding:0消除所有元素的内外边距
对div元素应用width:100px;height:100px;background-color:pink;将div元素的设为一个宽度为100px、高度为100px、背景颜色为粉红色的块级元素
使用position:absolute;将div元素的定位方式设为绝对定位，脱离文档流，使用left:50%;和top:50%;将div元素的左边缘和上边缘相对于包含块偏移50%的距离
使用transform属性的translate函数，根据自身宽高的百分比将div元素在水平和垂直方向上向左和向上平移各自宽高的一半距离，从而实现居中定位
方法二： 使用绝对定位和外边距
效果图：
代码块：
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
/* 方法二 */
div{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<body>
<div></div>
</body>
</html>方法二的描述
在body属性中定义一个div块级元素
在style属性中对样式进行设置，从而达到上图效果：
使用通配符选择器*,匹配文档中的所有元素，对所有元素应用margin:0和padding:0消除所有元素的内外边距
对div元素应用width:100px;height:100px;background-color:yellow;将div元素的设为一个宽度为100px、高度为100px、背景颜色为黄色的块级元素
使用position:absolute;将div元素的定位方式设为绝对定位，脱离文档流，使用top:0;bottom:0;left:0;right:0;将div元素相对于父元素的上下左右边界的距离设置为0
使用margin:auto;将上下左右的外边距设置为自动，使元素在垂直和水平方向上居中对齐
方法三：使用绝对定位和外边距偏移
效果图：
代码块：
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
/* 方法三 */
div{
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<body>
<div></div>
</body>
</html>方法三的描述
在body属性中定义一个div块级元素
在style属性中对样式进行设置，从而达到上图效果：
使用通配符选择器*,匹配文档中的所有元素，对所有元素应用margin:0和padding:0消除所有元素的内外边距
对div元素应用width:100px;height:100px;background-color:aquamarine;将div元素的设为一个宽度为100px、高度为100px、背景颜色为海蓝色的块级元素
使用position:absolute;将div元素的定位方式设为绝对定位，脱离文档流，使用top:50%；left:50%；将div元素的顶部边界和左侧边界相对于父元素的顶部偏移量和左侧偏移量设置为父元素高度和宽度的50%
使用margin-top:-50px；margin-left:-50px;通过负的上外边距和负的左外边距将div元素向上和向左偏移50px，实现垂直居中和水平居中。
