使用CSS集中的最佳方式是什么？

Question

使用CSS集中的最佳方式是什么？

<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%">
        Centered content
    </div>
</div>

或只是

    <div style="text-align:center">
        Centered content
    </div>

编辑：好的，所以我应该使用“text-align：center”作为内联元素，使用“margin：0 auto”作为块元素 谢谢。

Answer 1

第一个是粗糙的，看不到那么多东西，text-align：center对于内联元素非常可靠但是当一个元素不会居中边距时：0 auto;我是我以前的待命。

<div style="text-align:center">
        Centered content
</div>

或

<div style="margin: 0 auto;">
        Centered content
</div>

和BenM说的那样，保证金：0自动; center显示：具有已定义宽度的块元素。

那么什么是保证金：0自动;在做什么？好0将顶部和底部边距设置为0并且auto告诉浏览器计算左边距和右边距，浏览器将通过为边距为0左右的任何元素的左右边距指定相等的值来实现。风格。

Answer 2

最有效的方法是给元素一个宽度，然后指定margin: 0 auto。

例如：

div {
    width: 900px;
    margin: 0 auto;
}

Answer 3

如果您居中inline元素，则应在父

上使用text-align:center

如果是block元素 - 请使用margin: 0 auto;

 p {
      text-align:center;
 }


 div { 
     width: 100px;
     margin:0 auto;
 }

Answer 4

文字对齐：中心;只会将文本居中于div元素中。要使整个块元素居中，您需要添加margin：0 auto;或者用位置定位：绝对/相对，取决于你想要如何居中（父元素/身体等）