给元素设置水平居中

一、设置内联元素的水平居中

首先我们需要知道 text-align 属性是用来定义行内元素即内联元素是怎么相对其父元素对齐的。

⚠️注意

这里主要是针对行内元素的，比如文字、图片等等。它作用在某个元素上之后，不会对元素自身起作用，而是对它行内内容起作用。

它的属性值有很多，在实际项目中我们常用的就只有三种：

• left：即左对齐
• right：即右对齐
• center：即水平居中对齐

二、设置定宽高的块元素的水平居中

对于一个定宽高的块元素来说，要使其相对父元素水平方法上居中，可以使用 margin 外边距来设置。

/* 直接设置上下左右都是 auto */
margin: auto;
/* 设置上下边距为0，左右 auto */
margin: 0 auto;
/* 拆开进行设置左右两个方向的外边距为 auto */
margin-left: auto;
margin-right: auto;

auto 是一个很神奇的属性值，它让浏览器自己选择一个合适的外边距。对于设置了宽高的块元素，会使元素水平居中。

auto 可以左右均匀的占据可用空间，这也是它可以实现水平居中的原理之一。

但是要让其起作用，对于块元素来说，必须是设置了宽度的（原因是与 writing-mode 和文档流方向 direction 有关，这个比较深了，没有做过研究；这也是上下的 auto 计算值会为 0 的原因）。且左右两边的计算值也必然是和其剩余空间有关。

三、设置不定宽高的块元素的水平居中

设置不定宽高的块元素水平居中，主要是两个思路：

• 改变父元素的 display 属性
• 改变子元素的 display 属性

也就是说通过改变元素的 display 从更抽象的层面去做到元素的水平居中，这种方式不止可以作用在块元素上，也可以作用在内联元素上。

补充

在现代浏览器中，我们可以更快捷的使用 flex 来实现元素的居中（垂直和水平），以上方式可以更好的兼容低版本浏览器而已。