div是固定宽度还是流体宽度?无论哪种方式，对于流体宽度，您可以使用:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

或者你可以设置父div为text-align:center;子div的text-align:left;。

和左:50%;当div设置为position:absolute时，只根据整个页面居中。如果你将div设置为左侧:50%;它应该相对于父div的宽度。对于固定宽度，这样做:

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

实际上，这在CSS3 flex boxes中是非常简单的。

.flex-container{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ justify-content: center; align-items: center; width: 400px; height: 200px; background-color: #3498db; } .inner-element{ width: 100px; height: 100px; background-color: #f1c40f; } <div class="flex-container"> <div class="inner-element"></div> </div>

更新:

似乎我在写这个答案的时候没有阅读OP编辑。上面的代码将所有内部元素居中(它们之间没有重叠)，但是OP只希望一个特定的元素居中，而不是其他内部元素。所以@Warface回答第二种方法更合适，但仍然需要垂直居中:

.flex-container{ position: relative; /* Other styling stuff */ width: 400px; height: 200px; background-color: #3498db; } .inner-element{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); /* or 3d alternative if you will add animations (smoother transitions) */ transform: translate3d(-50%,-50%,0); /* Other styling stuff */ width: 100px; height: 100px; background-color: #f1c40f; } <div class="flex-container"> <p>Other inner elements like this follows the normal flow.</p> <div class="inner-element"></div> </div>

如果你想在div中居中，不关心除法大小，你可以使用Flex功能。我更喜欢使用flex，不使用元素的精确大小。

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

如你所见，Outer div是Flex容器，Inner必须是Flex项目，指定Flex: 1 1 auto;为了更好地理解，您可以看看这个简单的示例。http://jsfiddle.net/QMaster/hC223/

希望这对你有所帮助。

我相信现代的方法是在父容器中放置位置-项目:居中

一个例子可以在这里找到:https://1linelayouts.glitch.me

有很多方法可以让元素居中，可以使用显示属性，位置，浮动，边距。但通常我更喜欢使用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 > 身体< / >

为您的元素创建一个新的div元素居中，然后添加一个类专门为该元素居中，如下所示

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

Css

.centered{
    text-align:center;
}