如何在页面上垂直居中div? [复制]
Posted
技术标签:
【中文标题】如何在页面上垂直居中div? [复制]【英文标题】:How to vertically center a div on page? [duplicate] 【发布时间】:2017-06-30 11:33:02 【问题描述】:如何使#box div 在页面上垂直居中?我试过垂直对齐:中间;但它不起作用。您可以查看现场直播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;
【问题讨论】:
***.com/questions/13903556/…类似问题 那是使用 jQuery 而我使用的是纯 css。我只想要css 也分享 html 代码 【参考方案1】:方法一(位置,变换-平移):
*
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>
方法二(弹性盒):
*
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>
【讨论】:
【参考方案2】:以下三行就足够了:
.container
position: relative;
top: 50%;
transform: translateY(-50%);
【讨论】:
【参考方案3】:HTML
<div class="container"><div class="your-div"></div></div>
CSS
body, html
display:table;
height:100%;
width:100%;
.container
display:table-cell;
vertical-align:middle;
.container .your-div
width:150px;
height:150px;
background:green;
margin:0 auto;
【讨论】:
【参考方案4】:.parent
text-align: center;
white-space: nowrap;
.parent:before
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
.child
display: inline-block;
vertical-align: middle;
width: 300px;
【讨论】:
【参考方案5】:添加一个包装div;包装盒
#box-wrapper
position: relative;
#box
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
顺便说一句,可以在 css-tricks.com/centering-css-complete-guide 上找到更详细的解释
【讨论】:
【参考方案6】:你可以用弹性盒子做到这一点:
html,body
height: 100%;
min-height: 100%;
.Aligner
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 100%;
.Aligner-item
max-width: 50%;
background-color: red;
<div class="Aligner">
<div class="Aligner-item">…</div>
</div>
【讨论】:
以上是关于如何在页面上垂直居中div? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Bootstrap 4 中垂直居中 div? [复制]