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

发布时间：2020-12-14 19:35:17 所属栏目：资源来源：网络整理

导读：参见英文答案 How to vertically center a div for all browsers?36 我想永远中心一个水平和垂直的div. 我可以减少/增加窗口的宽度,并且div将始终保留在窗口的中心 .cent{ height:50px; width:50px; background-color:black; margin:auto;} 这是我目前的JSFi

参见英文答案 > 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;      
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!