1, the problem is centered horizontally
The level of 1.1 centered text issues
语法：text-align:center;
For example:
div{ width: 400px;
height: 60px;
line-height: 60px;
text-align: center; /*实现文字水平居中*/
border: 1px solid red;
}
<body>
<div> css实现文字居中: text-align:center; </div>
</body>
operation result:
1.2 Elements of the middle level
(1) block elements
in css, for the block elements, if given length and width, directly define the margin-left and margin-right for the auto can be horizontally centered.
语法：margin:0 auto;
等价于：margin:0 auto 0 auto ;
As long as the width of the block elements to this method will be effective.
If no element of the width of the block, the block elements will be covered with a default value of the maximum allowable width. At this time, this method is ineffective.
Therefore, in order to make use of this method must be horizontal center block elements to the block element width.
For example:
<!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>Document</title>
<style type="text/css">
div{
margin: 0 auto;
width: 400px;
height: 60px;
line-height: 60px;
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
css实现块元素居中: margin: 0 auto;
</div>
</body>
</html>```