要居中一个HTML元素，我可以使用CSS左:50%;。但是，这使得元素相对于整个窗口居中。
我有一个元素，它是<div>元素的子元素，我想让子元素以<div>这个父元素居中，而不是整个窗口。
我不希望容器<div>的所有内容居中，只是一个特定的子。
当前回答
如果子元素是内联的(例如不是一个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问题的解决方法，但一定要查看这个链接，非常有用。
其他回答
实际上，这在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，表格等)，我会把它包装在一个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问题的解决方法，但一定要查看这个链接，非常有用。
左:50%分别工作到最近的父静态宽度分配。尝试宽度:500px或在父div。或者，让你需要的内容居中显示:块，并设置左右边距为auto。
只需要给出父div的位置:relative
设置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/
