- 行内或类行内元素(比如文本和链接)
在块级父容器中让行内元素居中,只需使用 text-align: center;
text-align:center /*水平居中*/
这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。
- 块级元素
让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto(前提是已经为元素设置了适当的 width 宽度,否则块级元素的宽度会被拉伸为父级容器的宽度)。常见用法如下所示:
.center-me { margin: 0 auto; }
无论父级容器和块级元素的宽度如何变化,都不会影响块级元素的居中效果。