前言居中布局是前端页面最常见的布局需求。刚开始学习前端的时候，有过一段时间的困扰，后来在看了《CSS居中：完整指南》一文后掌握了方法。下面简单总结一下我现在知道的居中布局方法。概述首先我们来看一下居中布局需求的分类：水平居中、垂直居中、垂直居中、水平居中。对于不同的元素类型，无论是行内元素还是块级元素，我们都可以有不同的处理方式。这里引用mdn的文档，对内联元素和块级元素进行简单说明，有助于理解相应的实现原理。内联元素：内联元素只占据其相应标签的边框所包含的空间。如a、img、span、button、input、label、select、textarea等。块级元素：块级元素占据其父元素（容器）的整个空间。如div、h1~6、p、form、table、ul、ol等。当然，对于以上类型的元素，我们也可以设置display:inline-block使其成为行内框，使用方法内联元素使它们居中。下面总结了不同布局需求对应的实现方法。注意，本文所说的内联元素是display属性为inline或inline-block的元素。水平居中的内联元素将text-align属性定义为包含父元素的中心。.parent{text-align:center;}优点：兼容性好，适合多个inline-block元素在同一行居中，与每个元素的宽度无关。浏览器兼容性：所有块级元素都将当前元素的margin-left和margin-right属性设置为auto。一般缩写如下：.child{margin:0auto;}这时候的元素自然需要设置width属性，否则作为块级元素，其宽度为100%，不需要居中它。浏览器兼容性：所有垂直居中的内联元素都使用line-height如果内容是单行的，可以在包含的父元素中定义相同的高度和line-height。.parent{高度：20px;行高：20px；white-space:nowrap;}浏览器兼容性：都使用padding或者使用padding属性居中，但是使用条件比较有限，受外层包含元素的高度影响。.parent{padding-top:20px;padding-bottom:20px;}浏览器兼容性：所有使用伪元素对齐使用垂直对齐属性。场景。浏览器兼容性：所有Html: 如果这两种技术都行不通，你可以使用“幽灵元素”技术，在容器内放置一个全高的伪元素，然后文本垂直对齐。
