一、前言

开发中给标签(元素)设置居中的使用场景非常频繁，不同的标签类型设置方式也不同，本文旨在总结一套常用和标准的设置方式，同时也深入解析这样实现的原理。首先，我们大概来过一下一些必要的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-al