CSS：<div>元素中的中心元素
要将HTML元素居中，我可以使用CSS left: 50%; 。 但是，这是相对于整个窗口而言的元素。
我有一个元素，它是一个<div>元素的子元素，我要将子元素放在父元素<div>中间，而不是整个窗口。
我怎样才能做到这一点？
编辑 ：我不希望容器<div> 所有内容居中，只是一个特定的孩子。
设置text-align:center; 到父div，而margin: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>
其实这是非常简单的CSS3 弹性盒 。
.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>
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>
这应该中心分区
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
text-align:center; 对父div应该做的伎俩
div是固定宽度还是stream体宽度？ 无论哪种方式，您可以使用stream体宽度：
#element { /* this is the child div */ margin-left:auto; margin-right:auto; /* Add remaining styling here */ }
或者你可以将父div设置为text-align:center; 和小孩div text-align:left; 。
left:50%; 当div被设置为position:absolute;时，只根据整个页面居中position:absolute; 。 如果您将div设置为left:50%; 它应该做相对于父div的宽度。 对于固定的宽度，请这样做：
#parent { width:500px; } #child { left:50%; margin-left:-100px; width:200px; }
只要给父母的position: relative
首先，你可以用left：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; }
剩下的：50％对最近的父对象分配静态宽度。 尝试宽度：500像素或父div的东西。 或者，使您需要的内容居中显示：阻止并将左右边距设置为自动。
如果子元素是内联的（例如不是一个div ， table等），我会把它包装在div或p ，并使包装的文本alignmentcss属性等于中心。
<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>
否则，如果元素是一个具有固定宽度的块（ display: block ，例如div或者p ），我会将其margin和Left 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>
你当然可以添加一个text-align: center包装器元素，以使其内容居中。
我不会打扰定位，因为恕我直言，它不是为OPs的问题去的方式，但一定要检查这个链接 ，非常有帮助。
为你的元素创build一个新的div元素居中，然后添加一个专门为这个元素居中的类
<div id="myNewElement"> <div class="centered"> <input type="button" value="My Centered Button"/> </div> </div>
CSS
.centered{ text-align:center; }
分配text-align: center; 到父级并display: inline-block; 到div。
如果你想使用CSS3：
position:absolute; left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);
您可能需要进一步search以找出如何获得适合元素宽度的百分比。
例如，我有一个文章div里面的主要内容div ..在文章theres图像下，该图像是一个button，样式是这样的：
.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 {
}
/ *文章里面我想图像居中* /
.article img {
float: none; margin: 0 auto; padding: give it a padded ridge if you want;
}
/ *现在在这个图像在同一篇文章元素应该有一个button，如阅读更多当然，您需要使用EM或％时，其内部响应式devise* /
.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..*/
}
祝你好运
如果你想在一个div中居中元素而不关心分割大小，你可以使用Flex的力量。 我更喜欢使用flex，而不是使用精确的大小元素。
<div class="outer flex"> <div class="inner"> This is the inner Content </div> </div>
正如你所看到的，外部div是Flex容器，Inner必须是Flex指定的Flex项目flex: 1 1 auto; 为了更好地理解你可以看到这个简单的例子。 http://jsfiddle.net/QMaster/hC223/
希望这个帮助。
这篇文章提供了一个很好的解决scheme – http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/基本上：1.将孩子设置为绝对位置。; 2.将父级设置为相对位置。 3.将孩子的左边和顶部设置为50％。 4.平移（-50％， – 50％）将左侧和顶部移动子元素宽度的一半。
我find了另一个解决scheme
<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％而不是居中，但是在这种情况下你可以用容器的容量做得更大一些，
