<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.fdiv {
display: flex;
width: 200px;
height: 200px;
background-color: red;
}
.cdiv {
margin: auto;
}
</style>
</head>
<body>
<div class="fdiv">
<div class="cdiv">
11111
</div>
</div>
</body>
</html>
要实现水平和垂直居中需要在父元素中设置display:flex;子元素设置margin:auto;才能实现
实现效果: