在任何浏览器维度的中间居中垂直和水平可扩展的 div [重复]
Posted
技术标签:
【中文标题】在任何浏览器维度的中间居中垂直和水平可扩展的 div [重复]【英文标题】：Center a both vertical and horizontal scalable div in the middle of any browser dimension [duplicate] 【发布时间】：2017-03-29 07:12:42 【问题描述】：我试图在任何尺寸页面的中心放置一个圆形 div，并在调整浏览器大小时使其垂直和水平响应。
到目前为止，我已经设法将 div 放在页面中间，但它只是水平响应。如果可能的话，我需要让它也垂直响应。
你能推荐点什么吗？
这是代码和小提琴https://jsfiddle.net/6g2ccpar/
<div id="login">
<div class="login-box">
<h1 class="login-box__header">
Login
</h1>
<form class="login-box__form-usr-details" action="/somesearchaction" name="search" method="get">
<label for="user-email">Enter your email </label>
<input title="Enter user email" placeholder="Enter your email" name="email" id="user-email" type="text"></input>
<label for="user-password">Enter your password </label>
<input title="Enter user password" placeholder="Enter your password" name="password" id="user-password" type="text"></input>
<span class="forgot-pwd btn btn--white">Forgot password?</span>
<span class="submit btn btn--blue">Login</span>
</form>
</div>
</div>
#login
background: red;
.login-box
background: green;
width: 60%;
height: 60%;
overflow: auto;
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 9999;
border-radius: 50%;
&__header
font-size: 20px
&__form-usr-details
font-size:25px;
【问题讨论】：
您可以添加此类并为#login Div 元素指定特定高度。 .absolute-center 边距：自动；位置：绝对；顶部：0；左：0；底部：0；右：0； 我不确定我是否在关注你。您的意思是添加“.absolute-center”类作为#login div 的子类？ 看看这个，jsfiddle.net/devesh_dc/dzyvmt0o 感谢您的示例，但这不是我想要的。我已经将 div 居中，我的问题是如何在调整浏览器大小时使其垂直和水平完全响应。有意义吗？ 如果#loginbox 具有特定高度而不是使用 top:50% 和 margin-top:-height_of_#loginbox 或使用 css3 变换动画。 【参考方案1】：尝试将此应用于您的 .login-box：
width: 60vw;
height: 60vw;
这应该使您的登录框 div 的高度和宽度都相对于视口的宽度。
【讨论】：
【参考方案2】：您可以使用 flex-box 将项目水平和垂直居中。
您还必须将body 的高度设置为 100%：
index.html
<body>
<div id="login">
…
</div>
</body>
style.css
html
height: 100%;
body
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
【讨论】：
不幸的是它必须与 IE9 兼容。所以我排除了 Flex :/ 还是谢谢！ 你可以使用 polyfill：github.com/jonathantneal/flexibility 我更喜欢使用在现代浏览器中具有 solic 实现的最新 Web 技术，并在旧浏览器中使用 polyfill / shim。如果您不喜欢这种方法，可以使用 table 属性来解决您的问题 谢谢，很有用。【参考方案3】：body,html
height:100%;
width:100%;
.container
width:100%;
height:100%;
position:relative;
background:blue;
.round-div
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius:50%;
background: red;
transform: translateX(-50%) translateY(-50%);
<div class="container">
<div class="round-div">
</div>
</div>添加圆形 div 最高：50%； 左：50%； 变换：translateX(-50%) translateY(-50%);
我希望你明白逻辑
【讨论】：
解释您的解决方案，不鼓励仅使用代码的答案。【参考方案4】：你可以使用tabledisplay属性（从IE8理解）：
https://jsfiddle.net/6g2ccpar/3/或下面的sn-p进行测试
html
height: 100%;
width: 100%;
display: table;
body
display: table-cell;
vertical-align: middle;
text-align: center;
#login
background: red;
display: inline-table;
width: 50%;
max-width:90vh; /* remove this and find out resizing window's height */
white-space:nowrap;/* keeps pseudo & login-box side by side */
#login:before
content:'';
display:inline-block;
width:0;
padding-top:100%;/* will take parent's width for reference to draw a square */
vertical-align:middle;/* along login-box */
.login-box
background: green;
border-radius: 50%;
padding:0.5em 1px;
display:inline-block;
vertical-align:middle;/* along pseudo :before */
white-space:normal;
.login-box__header
font-size: 20px
.login-box__form-usr-details
padding: 0 1em;/* stay away from sides */
font-size: 25px;
input, span[class]
display:block;
margin:auto;
label
white-space: nowrap;/* evntually , looks better */
<div id="login">
<div class="login-box">
<h1 class="login-box__header">
Login
</h1>
<form class="login-box__form-usr-details" action="/somesearchaction" name="search" method="get">
<label for="user-email">Enter your email</label>
<input title="Enter user email" placeholder="Enter your email" name="email" id="user-email" type="text" />
<label for="user-password">Enter your password</label>
<input title="Enter user password" placeholder="Enter your password" name="password" id="user-password" type="text" />
<span class="forgot-pwd btn btn--white">Forgot password?</span>
<span class="submit btn btn--blue">Login</span>
</form>
</div>
</div>【讨论】：
感谢您的示例...它不是响应式的，不是吗？试图调整浏览器的大小，但没有。 @Beppe 你是什么意思？如此少的内容几乎可以在任何屏幕上显示 您好！我的意思是它没有响应......它确实停留在中间，但是在调整大小时它不会缩放......这有意义吗？ @Beppe ，是与否，应该重新调整什么？文本和输入？字体大小 ？还是只是容器？ @Beppe 是这样的吗？ jsfiddle.net/6g2ccpar/4!?以上是关于在任何浏览器维度的中间居中垂直和水平可扩展的 div [重复]的主要内容，如果未能解决你的问题，请参考以下文章