如果子元素是内联的(例如不是一个div，表格等)，我会把它包装在一个div或一个p，并使包装器的文本对齐css属性等于中心。

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

否则，如果元素是一个具有固定宽度的块(显示:块，例如div或p)，我将其左距和右距css属性设置为auto。

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

当然，您也可以向wrapper元素添加text-align: center，使其内容也居中。

我不会费心定位，因为依我之见，这不是OPs问题的解决方法，但一定要查看这个链接，非常有用。

如果你想使用CSS3:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

您可能需要做进一步的搜索，以弄清楚如何使百分比适合元素的宽度。

text-align:中心;在父div应该做的把戏

有很多方法可以让元素居中，可以使用显示属性，位置，浮动，边距。但通常我更喜欢使用flexbox，因为它简单易用。我知道不同的人有不同的偏好，但这完全取决于开发人员的偏好和元素之间的关系。

.parent { 显示:块; ｝ .sub-parent-1 { 显示:flex; justify-content:中心;/ /水平居中 对齐项目:中心;/ /垂直定心 ｝ 身体< > < div class = "父" > < div class = " sub-parent-1”> < div class = " child-1 " >…< / div > < / div > < div class = " child-2 " >…< / div > < div class = " child-3 " >…< / div > < div class = " child-4 " >…< / div > < div class = " child-5 " >…< / div > < / div > 身体< / >

CSS

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

HTML

<div class="divWrapper">Tada!!</div>

这应该使div居中

2016年HTML5 + CSS3方法

CSS

div#relative{
  position:relative;
}

div#thisDiv{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

HTML

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

你可以像这样使用bootstrap flex类名:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

即使里面有很多元素也可以。