我正在使用以下 css 将我的内容垂直和水平居中;问题是,当您最小化浏览器以使其小于内容div
时,它会继续居中但无法滚动。内容只是在顶部切断。
#splash-centre-container{
position: absolute;
top: 50%;
left: 50%;
height: 550px;
width: 760px;
min-height: 550px;
padding: 20px;
margin: -310px 0 0 -400px;
}
我正在使用以下 css 将我的内容垂直和水平居中;问题是,当您最小化浏览器以使其小于内容div
时,它会继续居中但无法滚动。内容只是在顶部切断。
#splash-centre-container{
position: absolute;
top: 50%;
left: 50%;
height: 550px;
width: 760px;
min-height: 550px;
padding: 20px;
margin: -310px 0 0 -400px;
}
这是因为当您将某些absolute
内容从页面流中拉出时定位,它不会“占用空间”。
您希望将min-width
andmin-height
应用于body
(或其容器),以便当屏幕变得太小时,启动屏幕居中的元素永远不会小于启动屏幕,因此不会离开屏幕。
HTML
<div class="spacer">
<div id="splash-centre-container">abc</div>
</div>
CSS
html, body {
min-width:760px;
height:100%;
min-height:550px;
position:relative;
}
#splash-centre-container {
position: absolute;
top: 50%;
left: 50%;
height: 550px;
width: 760px;
margin: -275px 0 0 -380px;
background-color:red;
}
你可以这样做
#splash-centre-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50%;
height: 50%;
position: absolute;
overflow: auto;
border: solid black 2px;
}
Chris Coyier在 2009 年发布了我能在这里找到的最佳解决方案。我认为这是最好的,因为它将内容垂直和水平居中,并且它允许动态高度(此处发布的其他答案取决于固定高度,这是不必要的限制)加上滚动较小的屏幕。这对于创建替换模式弹出窗口的居中内联表单非常有用。
我清理了该代码并将其转换为 Sass mixin,以便您可以轻松自定义表单宽度(提示:将表单元素 CSS 和相关变量添加到 Sass mixin,因为您的表单元素宽度将被限制在居中的内联表单内)。
SCSS
html,
body,
form {
height: 100%;
margin: 0;
padding: 0;
}
@mixin CenteredInlineForm( $ContainerSetName, $formWidth) {
div.#{$ContainerSetName}_CenteredForm {
display: table;
overflow: hidden;
margin: 0 auto;
height: 100%;
width: #{($formWidth + 15)}px;
div.#{$ContainerSetName}_CenteredFormContentContainer {
display: table-cell;
vertical-align: middle;
div.#{$ContainerSetName}_CenteredFormContent {
background-color: lightgrey;
border: 3px solid darkgrey;
border-radius: 15px;
padding: 15px;
}
}
}
*:first-child + html div.#{$ContainerSetName}_CenteredForm {
position: relative;
}
/*ie6 Support: */
/* * html div.#{$ContainerSetName}_CenteredForm{position:relative;} */
*:first-child + html div.#{$ContainerSetName}_CenteredFormContentContainer {
position: absolute;
top: 50%;
}
/*ie6 Only: */
/* * html div.#{$ContainerSetName}_CenteredFormContentContainer{position:absolute;top:50%;} */
*:first-child + html div.#{$ContainerSetName}_CenteredFormContent {
position: relative;
top: -50%;
}
}
@include CenteredInlineForm(UserInfoInput, 400);
HTML
<div class="UserInfoInput_CenteredForm">
<div class="UserInfoInput_CenteredFormContentContainer">
<div class="UserInfoInput_CenteredFormContent">
<p>
Content or form labels/inputs
</p>
...
</div>
</div>
</div>