一、前言
开发中给标签(元素)设置居中的使用场景非常频繁，不同的标签类型设置方式也不同，本文旨在总结一套常用和标准的设置方式，同时也深入解析这样实现的原理。首先，我们大概来过一下一些必要的HTML知识点，有经验的童鞋可以略过。
二、HTML标签类型
1，HTML有N多标签，根据显示的类型，主要可以分为3大类。
- 块级标签：独占一行的标签。能随时设置宽度和高度（比如div、p、h1、h2、ul、li）。
- 行内标签(内联标签)：多个行内标签能同时显示在一行。宽度和高度取决于内容的尺寸（比如span、a、label）。
- 行内-块级标签(内联-块级标签)：多个行内-块级标签可以显示在同一行。能随时设置宽度和高度（比如input、button）。
2，修改标签的显示类型。不同类型的标签在进行布局时都有它们的局限性，要么不能多行显示，要么不能设置标签的尺寸，比如说块级标签div在页面中随处可见，但是独占一行，如果我们需要它能够在多行显示，就需要修改标签的显示类型为行内-块级标签，因为行内-块级标签既可以多行显示又可以设置标签的宽高。当然我们可以根据不同的布局需求来修改标签的显示类型。在CSS中，我们可以通过display属性来达到目的，下面是它的可选取值：
- none：隐藏标签
- block：让标签变为块级标签
- inline：让标签变为行内标签
- inline-block：让标签变为行内-块级标签
三、水平居中
1. 行内标签、行内-块级标签
在父标签的样式中设置：
text-align: center
在这里text-align有两个作用：
- text-align会让所有的子标签水平居中对齐。
- text-align是继承属性，子标签因为继承了text-align的居中属性，里面的内容也会居中对齐。
PS：给子标签自己设置text-align，只会作用于标签中的内容的对齐方式。
2. 块级标签
1> 先上案例，在body中添加了一对div标签main，里面又嵌套了一对div标签test，我们知道块级标签独占一行，可以修改宽高尺寸，所以为了演示，我们修改main的宽度为300px，高度为200px。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML标签的居中</title>
<style>
#main{
background-color: red;
width: 300px;
height: 200px;
}
.test{
background-color: yellow;
}
</style>
</head>
<body>
<div id="main">
<div class="test">我是块级标签</div>
</div>
</body>
</html>
显示效果如下:
块级标签水平居中演示--01
2> 我们在父标签main中添加text-align属性为center，显示效果如下：
块级标签水平居中演示--02
看起来貌似跟行内标签一样，只需要在父标签中添加text-align属性为center即可，但是块级标签可以设置宽高尺寸，所以我们来改变一下子标签test的尺寸，设置宽度为200px，再来看看样式和效果：
.test{
background-color: yellow;
width: 200px;
}
块级标签水平居中演示--03
我们可以发现，子标签test的内容是水平居中了，因为继承了父标签的text-align属性，但是标签自身没有水平居中。那怎么才能居中呢，我们想可不可以从标签的外边距margin入手呢，比如先设置子标签test的左外边距为auto，样式和效果如下：
.test{
background-color: yellow;
width: 200px;
margin-left: auto;
}
块级标签水平居中演示--04
我们可以看到子标签test向右靠齐了，那我们想可不可以再添加一个右外边距为auto呢，样式和效果如下：
.test{
background-color: yellow;
width: 200px;
margin-left: auto;
margin-right: auto;
}
块级标签水平居中演示--05
我们可以看到子标签test终于水平居中了，达到了我们想要的效果😀。下面总结一下块级标签设置水平居中的方式，分两步：
- 在父标签的样式中设置：
text-align: center
- 同时在自身的样式中设置：
margin:0 auto
PS：margin-left 和 margin-right 可以用margin这一个多值属性来代替，两个值时，第一个代表上下两个外边距的值，第二个代表左右两个外边距的值。
四、垂直居中
1. 行内标签、行内-块级标签
在父标签的样式中添加：
line-height: height
1> line-height：内容的高度，这里的内容比如有文字或图片。
2> height：标签内容的真实高度，标准的盒子模型中真实的内容尺寸等同于padding包含的内容的尺寸(包括padding的值)，IE的盒子模型中真实的内容尺寸等同于border包含的内容的尺寸(包括border的值)，具体可以参考CSS盒子模型。如下样式代码：
#main{
background-color: red;
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
}
2. 块级标签
1> 先上案例，在body中添加了一对div标签main，里面又嵌套了一对div标签test，我们知道块级标签独占一行，可以修改宽高尺寸，所以为了演示，我们修改main的宽度为300px，高度为200px。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML标签的居中</title>
<style>
#main{
background-color: red;
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
}
.test{
background-color: yellow;
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="main">
<div class="test">我是块级标签</div>
</div>
</body>
</html>
显示效果如下:
块级标签垂直居中演示--01
看起来貌似又没问题，现在我改变一下块级标签的高度，把height改为100px，效果如下：
块级标签垂直居中演示--02
可以看到文字内容还是在中间，但是子标签test的高度已经改变了，为什么文字内容还在中间呢，这是因为父标签main设置了line-height等于height的原因，子标签test继承了父标签line-height的值，所以我们可以在子标签里面设置自身的line-height的值，样式代码和效果如下：
.test{
background-color: yellow;
width: 200px;
height: 100px;
line-height: 100px;
margin: 0 auto;
}
块级标签垂直居中演示--03
好了，接下来需要做的是让子标签test在父标签垂直居中显示。有两种方式，第一种，用弹性布局的思想，只需在子标签test中添加下列属性：
display: flex;
flex-direction: column;
justify-content: center;
第二种，用定位的技巧来实现：
<style>
#main{
background-color: red;
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
position: relative;
}
.test{
background-color: yellow;
width: 200px;
height: 100px;
line-height: 100px;
margin: 0 auto;
position: absolute;
top:50%;
left:50%;
transform: translate( -50%, -50%);
}
</style>
最终效果：
块级标签垂直居中演示--04
五、总结
最后以一张图来总结：
标签的居中
最后，如果有什么问题欢迎向我指出，谢谢。
网友评论