实际上，这在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>

首先，你可以用左:50%来相对于父div居中，但为此你需要学习CSS定位。

一个可能的解决方案是做一些像

    div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

如果你的div是居中相对定位，你可以这样做

    .mydiv { position:relative; margin:0 auto; } 

指定text-align: center;到父对象并显示:inline-block;到div。

只以特定的子为中心:

.parent { 身高:100 px; 背景颜色:灰色; 位置:相对; ｝ .child { 背景颜色:白色; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 宽度:20 px; 高度:20 px; 保证金:汽车; ｝ < div class = "父" > < span class = "孩子" >你好> < /跨度 < / div >

或者，你也可以使用flex，但是那样会把所有的子节点居中

.parent { 身高:100 px; 背景颜色:灰色; 显示:flex; justify-content:中心; 对齐项目:中心; ｝ .child { 背景颜色:白色; ｝ < div class = "父" > < span class = "孩子" >你好> < /跨度 < / div >

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

设置text-align:中心;到父div，页边距:auto;到子div。

#parent { text-align:center; background-color:blue; height:400px; width:600px; } .block { height:100px; width:200px; text-align:left; } .center { margin:auto; background-color:green; } .left { margin:auto auto auto 0; background-color:red; } .right { margin:auto 0 auto auto; background-color:yellow; } <div id="parent"> <div id="child1" class="block center"> a block to align center and with text aligned left </div> <div id="child2" class="block left"> a block to align left and with text aligned left </div> <div id="child3" class="block right"> a block to align right and with text aligned left </div> </div>

这是一个很好的资源来集中几乎任何东西。 http://howtocenterincss.com/