html – 水平和垂直放置div,并在调整父级大小时保持中心

前端之家收集整理的这篇文章主要介绍了html – 水平和垂直放置div,并在调整父级大小时保持中心前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > How to vertically center a div for all browsers?36
我想永远中心一个水平和垂直的div.

我可以减少/增加窗口的宽度,并且div将始终保留在窗口的中心

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

这是我目前的JSFiddle Example.
但是我想保持div垂直中心,所以如果我减少/增加窗口的高度,div将通过停留在窗口的中间来响应.

对于这个例子,我想保持黑盒子垂直居中在窗口调整大小上,就像它始终保持在水平的中心一样.

解决方法

您可以使用CSS表:

JsFiddle

标记

<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;      
}

猜你在找的HTML相关文章