要居中一个HTML元素，我可以使用CSS左:50%;。但是，这使得元素相对于整个窗口居中。
我有一个元素，它是<div>元素的子元素，我想让子元素以<div>这个父元素居中，而不是整个窗口。
我不希望容器<div>的所有内容居中，只是一个特定的子。
当前回答
例如，我有一个文章div里面的主要内容div.. 在文章里面有一个图片，图片下面是一个按钮，样式如下:
.article {
width: whatever;
text-align: center;
float: whatever (in case you got more articles in a row);
margin: give it whatever margin you want;
｝ .article {
}
/*在文章里面，我想让图像居中*/
文章{
float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;
}
/*现在，在同一article元素的这张图片下，应该有一个按钮，如阅读更多。当然，当它在响应式设计中时，你需要使用em或%
.button {
background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/
}
祝你好运
其他回答
text-align:中心;在父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:
position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);
您可能需要做进一步的搜索，以弄清楚如何使百分比适合元素的宽度。
设置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/
我找到了另一个解决办法
<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更大，这样就可以了
