我希望随时将一个div水平和垂直居中。
当我缩小或放大窗口的宽度时,div会始终保持在窗口的中心位置。
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
}
这里是我目前的JSFiddle示例。
但我也想让这个div在纵向上保持居中,以便在缩小/增加窗口高度时,div会响应并保持在窗口中央。
关于这个示例,我希望能像水平居中一样,在窗口调整大小时,保持黑色框在垂直方向上居中。
我希望随时将一个div水平和垂直居中。
当我缩小或放大窗口的宽度时,div会始终保持在窗口的中心位置。
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
}
这里是我目前的JSFiddle示例。
但我也想让这个div在纵向上保持居中,以便在缩小/增加窗口高度时,div会响应并保持在窗口中央。
关于这个示例,我希望能像水平居中一样,在窗口调整大小时,保持黑色框在垂直方向上居中。
您可以使用CSS表格来实现这一点:
<div class="container">
<div class="cent"></div>
</div>
(相关的)CSS
html,body
{
height: 100%;
}
body
{
display: table;
margin: 0 auto;
}
.container
{
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent
{
height: 50px;
width: 50px;
background-color: black;
}
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
演示链接在这里
。 .cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
position:absolute;
left:50%;
top:50%;
margin-left:-25px;
margin-top:-25px;
}
测试一下
.cent {
width: 50px;
height: 50px;
background-color: black;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
}
这里有一个例子:http://jsbin.com/iquviq/30/edit
请检查这个
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
margin-top:50%;
}
试一下这个
.cent
{
height:50px;
width:50px;
background-color:black;
margin-left: -150px;
margin-top: -150px;
margin:auto;
position:absolute;
top:50%;
left:50%;
}
.cent
{
height:50px;
width:50px;
background-color:black;
position:absolute;
left:50%;
top:50%;
margin: 0 auto;
}