水平居中元素的先决条件： 0 auto; [复制]

Posted 2023-03-06

【中文标题】水平居中元素的先决条件： 0 auto; [复制]

【英文标题】：Prerequisites to horizontally center an element with margin: 0 auto; [duplicate]

【发布时间】：2013-09-23 04:37:52

【问题描述】：

对于我想以margin:0 auto; 水平居中的元素，最低样式声明要求是什么？

以及包含元素的最低要求样式声明？

我希望解决方案与元素类型无关，即无论是 span、div、a 等都可以工作。

该解决方案应该适用于任何modern browser。

【问题讨论】：

您是否 100% 确定此处提供的信息适用于任何特定情况？我完全知道关于这个主题的帖子数以百万计，但我对中立条件非常准确。

【参考方案1】：

您也必须指定width，因为如果块级元素上没有width，它只会占用所有100% 的水平空间。

对于span 或a 之类的标签，您必须将它们设为display block。

【参考方案2】：

对于水平居中，您必须指定元素的width，并且不能使用float 属性。

【讨论】：

float 有什么关系？

【参考方案3】：

这是一个具有最少所需属性的泛型类（避免使用margin: 0 auto 简写，以免不必要地覆盖margin-top 和margin-bottom 属性）：

.horizontal-center 
    margin-right: auto;
    margin-left: auto;
    display: block;
    width: 80%; /* any value other than auto */

对.horizontal-center 的父级的唯一限制是它需要display: block|inline-block 和一个大于或等于.horizontal-center 的width。