前端布局居中可以说是家常便饭，几乎所有地方都会用到。我们经常使用水平居中和垂直居中。今天小编就带大家看看这些常用的居中方法都有哪些实现方法。水平居中：水平居中是将子元素排列在父元素中水平居中的位置。有很多方法可以实现这一点。让我们看看一些常用的。display:inline-block和text-align:center的使用原理是将子容器设置为行内块元素，然后为父容器设置属性使文本居中，从而达到目的。缺点是里面的文字会居中，可以通过单独设置样式来解决。display:table和margin:0auto的使用原理是先将子容器设置为块级表格显示，再设置居中。缺点是不兼容低版本ie的浏览器。在这里，小编建了一个前端学习交流按钮群：132667127，自己整理的最新前端资料和进阶开发教程。如果愿意，可以进群一起学习交流。position:absolute和transform的原理是先将子容器设置为相对定位，将左边的距离移动到相对宽度的一半，这样整个容器的左边就会在一半的线上，看起来正确的。我们需要将子容器的一半向左移动才能达到目的。缺点是transform属于css3内容，存在浏览器兼容性问题。可以把transform换成margin-left，设置自己宽度的一半来达到同样的目的。flex和margin的使用原理是通过css3布局属性flex将子容器转化为flex项，然后设置子容器居中。缺点是css3属性，存在浏览器兼容性问题。flex和justify-content的使用原理是通过css3布局属性flex将子容器转化为flex项，然后使用justify-content属性实现居中。该方法需要为父容器设置这两个属性。缺点是css3属性，存在浏览器兼容性问题。垂直居中：垂直居中就是将子元素排列在父元素的垂直居中位置。有很多方法可以实现这一点。让我们看看一些常用的。display:table-cell和vertical-align:middle的使用原理是通过将父容器转换为表格单元格来显示，然后将表格单元格的内容垂直居中。这两个属性在使用时都需要设置为父容器。使用position:absolute和transform原理类似于水平居中，即先将子容器设置为相对定位，将顶部距离移动到相对高度的一半，这样整个容器的顶部就会在一半线的位置，看起来较低，我们需要将子容器向上移动一半才能达到目的。缺点是css3属性，存在浏览器兼容性问题。可以把transform换成margin-top，把自己的height设置成half，达到同样的目的。flex和align-items的使用原理是通过css3布局属性flex将子容器转化为flexitem，然后使用align-items属性实现居中。该方法需要为父容器设置这两个属性。缺点是css3属性，存在浏览器兼容性问题。至于同时水平和垂直居中，还怕上面两种方法出不来吗？只是需要稍微组合一下，比如下面常见的组合：使用absolute和transform，使用flex和justify-content和align-itemsinline-block和text-alignandtable-cell和vertical-align
