如何使用CSS水平居中元素？

Question

使用CSS对我目前看到的元素进行水平居中的每个示例都说明将margin-left和margin-right设置为auto。我对CSS不是很有经验，所以我想知道是否有理由设置这两个属性而不只是将其中一个设置为50%？会有副作用吗？

Answer 1

您在问题中添加了css3标记。现代浏览器（http://caniuse.com/#feat=flexbox）中的一个选项是使用Flexbox。将display: flex; justify-content: center添加到父级。这将使其孩子们居中。

CSS Tricks有一个很好的Flexbox指南：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

将左边距设置为50％将导致框的左边缘居中，这与整个框居中不完全相同。

另一种常用方法是将left属性设置为50%，设置固定宽度，并将左边距设置为固定宽度的一半。