我之所以整理这类专题的手册，就是CSS相关的内容实在太碎和零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时候过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会用到的高频CSS相关方法归纳到这个手册里（有的内容可能来源其它作者），欢迎你持续的订阅和关注。

水平居中设置

我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。

这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下

行内元素

这几天有小伙伴在我的web前端交流群里说前几天面试一家公司，被问到垂直居中的方法，只答出了margin、table-cell、flex三种，然后就不知道了，然后问我除此之外还有哪些？，于是我整理了一下居中的方案做个记录，希望对大家也有帮助。

如果哪里写的不对，欢迎指正，非常感谢。

作者｜颜海镜

编辑｜覃云

出处丨前端之巅

本文已获作者授权，转载来源：

https://segmentfault.com/a/1190000016389031

划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了。

我们在使用css来布局时经常需要进行居中，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，利用css来实现对象的垂直居中有许多不同的方法，比较难的是应该选择哪种正确的方法。比如我们都知道 margin:0 auto;的样式能让元素水平居中，而margin: auto;却不能做到垂直居中……下面就css居中的一些常用方法做个集中的介绍。

在今天的内容中，廊坊网站建设公司的技术人员将分享下网站导航水平居中设置的方法，其实办法有很多，以CSS代码为例，这种代码操作很方便，后期修改的时候也简单，以下是详细的实例操作。

方法一：使用display:inline-block控制

这个方法比较简单，是将容器转成display:inline-block行内块级元素，然后就可以直接用text-align:center使其达到水平居中效果。HTML代码中需要一个div来包围这个导航菜单。

对于html的元素居中其实只有两类居中，一是块元素居中，二是内联元素居中。

内联元素居中使用text-align，块元素居中使用margin。

一、内联元素

内联元素居中，使用原则就是在其父元素上设置text-margin:center。

例如<span>元素居中