<分区>
如何让#box div 在页面上垂直居中？我试过 vertical-align: middle;但它不起作用。可以现场查看现场here
这是CSS:
iframe {
position: fixed;
width: 100vw;
height: 100vh;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
}
body {
background-color: #000;
}
#box {
text-align: center;
vertical-align: middle;
}
#link {
color: #FFF;
}
#download {
color: #FFF;
}
最佳答案
方法一(位置、变换-翻译):
* {
padding: 0;
margin: 0;
}
.parent {
position: relative;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: gray;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10em;
height: 5em;
background-color: white;
box-shadow: 1px 1px 10px rgba(0,0,0,.4);
}<div class="parent">
<div class="child"></div>
</div>方法二( flex 盒子):
* {
padding: 0;
margin: 0;
}
.parent {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: gray;
display: flex;
}
.child {
margin: auto;
width: 10em;
height: 5em;
background-color: white;
box-shadow: 1px 1px 10px rgba(0, 0, 0, .4);
}<div class="parent">
<div class="child"></div>
</div>关于html - 如何在页面上垂直居中一个div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42187838/