我喜欢魔法。

html, body {
 height: 100%;
}

.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}


<div class="flex-container">
  <div>Content</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/

希望这对你有所帮助。

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

如果子元素是内联的(例如不是一个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问题的解决方法，但一定要查看这个链接，非常有用。

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

左:50%分别工作到最近的父静态宽度分配。尝试宽度:500px或在父div。或者，让你需要的内容居中显示:块，并设置左右边距为auto。