实际上，这在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的位置:relative

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/

首先，你可以用左: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; } 

只以特定的子为中心:

.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 >

我找到了另一个解决办法

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

在身体上

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

这将在容器变大或变小时将内容div居中。在这种情况下，你的内容应该大于容器的1100%才能不居中，但在这种情况下，你可以让with of containerSecond更大，这样就可以了