我是css3
的新手。只想知道如何使div居中对齐,它应该可以在网络浏览器,web-kit上工作。我没有页面的确切大小。我试过了
div.inputs {
margin-left:auto;
margin-right:auto;
}
但这对我永远都行不通。
最佳答案
水平和垂直:
稳定的解决方案(轻松支持灵活的高度):
看起来更稳定的代码可以在垂直和水平方向居中固定宽度,高度灵活的内容:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 100px
/*whatever width you want*/
;
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>The inner content :)</p>
</div>
</div>
</div>
又脏又臭:
根据您对另一个答案的评论,您希望其水平和垂直居中或仅水平居中。您可以使用绝对位置来做到这一点:
.centerDiv {
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
background-color: green;
}
<div class="centerDiv">Center Me :)</div>
仅水平:
如果要使其仅水平居中,请使用:
.centerDiv {
width: 270px;
margin: 0 auto;
}