我在使用HTML(垂直和水平)居中div时遇到问题。我的代码看起来像这样:
<div id="container">SOME HTML</div>
#container{
width: 366px;
height: 274px;
margin: 50%;
top: -137px;
left: -188px;
position:absolute;
}
只有chrome将此div放在屏幕中间。
答案 0 :(得分:7)
这会使<div>
水平居中:
#container{
width: 366px;
height: 274px;
margin: 0 auto;
}
垂直居中不是很简单,您可能必须使用javascript,或者尝试this css solution。
答案 1 :(得分:2)
#container{
width: 366px;
height: 274px;
top: 50%;
left: 50%;
margin: -137px 0 0 -188px;
position:absolute;
}
答案 2 :(得分:1)
您可以使用:
#container {
// Your other values, but remove position: absolute;
margin: 0 auto;
}
或者,您可以这样做:
#wrapper, #container {
border: 1px solid red;
height: 500px;
width: 600px;
}
#wrapper {
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: yellow;
left: 50%;
padding: 10px;
position: relative;
top: 50%;
}
你是HTML代码:
<div id="wrapper">
<div id="container">
<h1>Centered Div</h1>
<p>
This div has been centered within your browser window.</p>
</div>
</div>
这会将<div>
置于浏览器窗口的中间位置。
答案 3 :(得分:1)
这就是技巧(垂直和水平):
#container{
position: absolute;
width: 366px;
height: 274px;
left: 50%;
top: 50%;
margin-left: -183px; /* half width */
margin-top: -137px; /* half height */
}
答案 4 :(得分:1)
试试这个:
<div class="cont">
<div class="box"></div>
</div>
的CSS:
.cont{
background-color: tomato;
width: 600px;
height: 400px;
position: relative;
}
.box {
width:100px;
height:100px;
background-color: teal;
color:#fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
答案 5 :(得分:-1)
只使用CSS应该没问题:
这是demo
#container{
width: 366px;
height: 274px;
margin: 50%;
top: 50%;
left: 50%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}