- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在我的应用程序中创建一个弹出窗口,我需要将它垂直居中。我不知道弹出窗口的高度,所以我不能硬编码任何值。
我正在试验以下代码:Centering in the Unknown
到目前为止居中工作正常,但有一个问题。我的弹出窗口有一个固定的宽度(并且它们没有响应),所以我的目标是当窗口的宽度低于弹出窗口的宽度时,应该出现一个水平滚动条。
在更高的分辨率下居中效果很好:
但是当窗口分辨率低于弹出窗口分辨率时,会发生这种情况:(实际弹出窗口移动到视口(viewport)下)
.block {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display: inline-block;
vertical-align: middle;
width: 500px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
<div class="block">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
最佳答案
据我所知,不可能用位置固定元素触发滚动条,但是有一种方法可以防止弹出窗口在视口(viewport)下移动,我们可以使用字体大小技巧,设置 font-size:0;
在容器上和font-size:16px;
左右在内盒上,阅读更多 - https://stackoverflow.com/a/5078297/483779然后改固定width
至 max-width
使其响应,同样没有滚动条。
我还添加了一些其他方法。 第一个 将使内容框始终位于中间。 第二个 的行为类似于您当前的演示。 3rd 将能够触发滚动条,但它使用的是绝对位置。
方法 1: 使用 CSS3 transform
, 浏览器支持IE9+。
.wrapper {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.centered {
width: 500px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="wrapper">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
方法 2: 使用 CSS 表格布局,它应该适用于 IE8+。注意,添加了额外的 <div>
进入标记。
.wrapper {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: table;
width: 100%;
height: 100%;
}
.centered {
display: table-cell;
vertical-align: middle;
}
.content {
max-width: 500px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
margin: auto;
}
<div class="wrapper">
<div class="centered">
<div class="content">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
</div>
方法 3: 使用绝对位置,当视口(viewport)小于内容框时触发滚动条,更改 position:relative
至 absolute
.wrapper {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: table;
border-collapse: collapse;
width: 100%;
height: 100%;
}
.centered {
display: table-cell;
vertical-align: middle;
}
.content {
width: 500px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
margin: auto;
}
<div class="wrapper">
<div class="centered">
<div class="content">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
</div>
关于html - 小屏幕上居中弹出窗口的溢出问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31124390/
我是一名优秀的程序员,十分优秀!