要居中一个HTML元素，我可以使用CSS左:50%;。但是，这使得元素相对于整个窗口居中。
我有一个元素，它是<div>元素的子元素，我想让子元素以<div>这个父元素居中，而不是整个窗口。
我不希望容器<div>的所有内容居中，只是一个特定的子。
当前回答
<html>
<head>
</head>
<style>
.out{
width:200px;
height:200px;
background-color:yellow;
}
.in{
width:100px;
height:100px;
background-color:green;
margin-top:50%;
margin-left:50%;
transform:translate(-50%,50%);
}
</style>
<body>
<div class="out">
<div class="in">
</div>
</div>
</body>
</html>
其他回答
指定text-align: center;到父对象并显示:inline-block;到div。
只需要给出父div的位置:relative
左:50%分别工作到最近的父静态宽度分配。尝试宽度:500px或在父div。或者，让你需要的内容居中显示:块，并设置左右边距为auto。
如果你想在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/
希望这对你有所帮助。
如果子元素是内联的(例如不是一个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问题的解决方法，但一定要查看这个链接，非常有用。
