当div水平和垂直居中时，放大后，div的顶部不可见
在我的页面上我有一个居中的div，它持有一个表单。 div以屏幕中间为中心。放大后，div的顶部不可见，为什么？我该怎么解决这个问题？它也忽略了保证金。
您可以在测试网站here上查看。
谢谢！
编辑： 这里的代码段，所以您不必打开jsfiddle。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$("body").removeAttr('class');
var register = $("#register-link");
var button = $("button");
register.click(function(){
$("#nick").stop(true, false).slideToggle({duration: 350, queue: false});
$("#password-repeat").stop(true, false).slideToggle({duration: 350, queue: false});
button.html(button.html() == 'Prihlásiť sa' ? "Registrovať sa" : "Prihlásiť sa");
register.text(register.text() == "alebo sa zaregistruj" ? "alebo sa prihlás" : "alebo sa zaregistruj");
});/* general */
.preload *{-webkit-transition:none !important;-moz-transition:none !important;-ms-transition:none !important;-o-transition:none !important;transition:none !important}
html { -webkit-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; }
a{
color: white;
}
a:active {
color: red;
}
html{
height: 100%;
}
body{
font-family: 'Open Sans', sans-serif;
background: -webkit-gradient(linear, left top, right top, from(#6a11cb), to(#2575fc));
background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
font-size: 1em;
height: inherit;
}
h1{
text-align: center;
vertical-align: top;
margin-bottom: .9em;
font-family: Pacifico;
font-size: 5em;
background: -webkit-gradient(linear, left top, right bottom, from(#d93589), to(#c72b5a));
background: linear-gradient(to bottom right, #d93589, #c72b5a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 0;
cursor: default;
}
form{
max-width: 19.750em;
margin: 0 1em 0 1em;
text-align: center;
}
form input{
width: 100%;
height: 100%;
background: rgba(0,0,0, 0.8);
border: none;
padding: 1em;
margin-bottom: 1em;
color: white;
border-radius: 0.313em;
outline: none;
-webkit-transition: background 0.5s;
transition: background 0.5s;
}
form input:focus{
background: rgba(0,0,0, 1);
}
form input:last-child{
margin-bottom: 0;
}
button{
margin-top: 1em;
background: -webkit-gradient(linear, left top, right top, from(#ec008c), to(#fc6767));
background: linear-gradient(to right, #ec008c, #fc6767);
background-size: 200%;
background-position: left;
text-transform: uppercase;
font-weight: 600;
color: #fff;
border-radius: 2.063em;
padding: 1.250em 2.500em;
max-width: 100%;
border: none;
outline: none;
cursor: pointer;
display: block;
margin: 1em auto;
}
form small a{
display: block;
color: black;
}
.popup{
background: white;
border-radius: .5em;
padding: 3.5%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<body class="preload">
<div class="popup">
<h1 class="heartbeat">Lorem.</h1>
<form>
<input style="display:none;" type="text" placeholder="Prezývka" id="nick">
<input type="text" placeholder="Email" id="email">
<input type="password" placeholder="Heslo" id="password">
<input style="display: none;" type="password" placeholder="Heslo znova" id="password-repeat">
<button type="submit">Prihlásiť sa</button>
<small><a href="#" id="register-link">alebo sa zaregistruj</a></small>
</form>
</div>
</body>
5 个答案:
答案 0 :(得分：0)
@media only screen and (max-width: 500px) {
}
您可以使用媒体查询进行如上调整。我希望这会对你有帮助！
答案 1 :(得分：0)
你使用绝对位置错误地使用这种方式：
.popup {
background: white;
margin: auto;
width: 90%;
}
之后，您必须更改输入样式。使用媒体查询进行良好的设计。 我建议您使用响应式框架，例如bootstrap。
您也可以使用它：
<div class="vam-container">
<div class="vam-item">
</div>
</div>
/*Should not use with clearfix*/
.vam-container:before {
content: "";
height: 100%;
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
/*Should not set width property 100% or full width*/
.vam-item {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
答案 2 :(得分：0)
将#ifndef SERVER_H
#define SERVER_H
#include <iostream>
#include <string>
#include <boost/bind.hpp>
#include <boost/shared_ptr.hpp>
#include <boost/enable_shared_from_this.hpp>
#include <boost/asio.hpp>
#include "connection.h"
class Server {
private:
boost::asio::ip::tcp::acceptor accept;
public:
Server (boost::asio::io_service&);
~Server ();
void wait_connection();
void callback_accept(boost::shared_ptr<Connection> new_connection, const boost::system::error_code& error);
};
#endif /* end of include guard: SERVER_H */
#ifndef CONNECTION_H
#define CONNECTION_H
#include <iostream>
#include <string>
#include <boost/bind.hpp>
#include <boost/shared_ptr.hpp>
#include <boost/enable_shared_from_this.hpp>
#include <boost/asio.hpp>
class Connection : public boost::enable_shared_from_this<Connection>
{
private:
boost::asio::ip::tcp::socket socket;
std::string message;
public:
Connection (boost::asio::io_service&);
~Connection ();
static boost::shared_ptr<Connection> start_connection(boost::asio::io_service&);
boost::asio::ip::tcp::socket& getSocket();
void send_message_to_client();
void callback_send();
};
#endif /* end of include guard: CONNECTION_H */
设置为max-height: 100vh类
popuphtml {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
a {
color: white;
}
a:active {
color: red;
}
html {
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
background: -webkit-gradient(linear, left top, right top, from(#6a11cb), to(#2575fc));
background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
font-size: 1em;
height: inherit;
}
h1 {
text-align: center;
vertical-align: top;
margin-bottom: .9em;
font-family: Pacifico;
font-size: 5em;
background: -webkit-gradient(linear, left top, right bottom, from(#d93589), to(#c72b5a));
background: linear-gradient(to bottom right, #d93589, #c72b5a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 0;
cursor: default;
}
form {
max-width: 19.750em;
margin: 0 1em 0 1em;
text-align: center;
}
form input {
width: 100%;
height: 100%;
background: black;
border: none;
padding: 1em;
margin-bottom: 1em;
color: white;
border-radius: 0.313em;
outline: none;
-webkit-transition: background 0.5s;
transition: background 0.5s;
}
form input:focus {
background: rgba(black, 1);
}
form input:last-child {
margin-bottom: 0;
}
button {
margin-top: 1em;
background: -webkit-gradient(linear, left top, right top, from(#ec008c), to(#fc6767));
background: linear-gradient(to right, #ec008c, #fc6767);
background-size: 200%;
background-position: left;
text-transform: uppercase;
font-weight: 600;
color: #fff;
border-radius: 2.063em;
padding: 1.250em 2.500em;
max-width: 100%;
border: none;
outline: none;
cursor: pointer;
display: block;
margin: 1em auto;
}
form small a {
display: block;
color: black;
}
.popup {
background: white;
border-radius: .5em;
padding: 3.5%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 100vh;
}
答案 3 :(得分：0)
您可以添加以下规则，该规则适用于高度小于400px的所有窗口（=弹出窗口的高度）。它会将弹出窗口放在窗口顶部的水平中心，并使其可滚动。
@media screen and (max-height: 400px) {
.popup {
position: relative;
top: 0;
left:0;
transform: none;
width: 396px;
margin: 0 auto;
}
}
这是你的小提琴：https://jsfiddle.net/g86qnjfk/1/
答案 4 :(得分：0)
最后我想出了如何解决这个问题。这次我没有使用display: flex;甚至position: absolute;。我使用display:table;将div居中。问题消失了。
我将.popup更改为：
.popup{
background: white;
border-radius: .5em;
padding: 10%;
}
然后我改变了身体：
body{
font-family: 'Open Sans', sans-serif;
background: -webkit-gradient(linear, left top, right top, from(#6a11cb), to(#2575fc));
background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
font-size: 1em;
display: table;
margin: 0 auto;
}
并添加了#center div：
#center{
height: 100%;
display: table-cell;
vertical-align: middle;
}
我也改变了HTML（包装内容为#center div）。
您可以看到包含所有代码的代码段。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$("body").removeAttr('class');
var register = $("#register-link");
var button = $("button");
register.click(function(){
$("#nick").stop(true, false).slideToggle({duration: 350, queue: false});
$("#password-repeat").stop(true, false).slideToggle({duration: 350, queue: false});
button.html(button.html() == 'Prihlásiť sa' ? "Registrovať sa" : "Prihlásiť sa");
register.text(register.text() == "alebo sa zaregistruj" ? "alebo sa prihlás" : "alebo sa zaregistruj");
});/* general */
.preload *{-webkit-transition:none !important;-moz-transition:none !important;-ms-transition:none !important;-o-transition:none !important;transition:none !important}
html { -webkit-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit;}
a{
color: white;
}
a:active {
color: red;
}
html, body {
height:100%;
}
body{
font-family: 'Open Sans', sans-serif;
background: -webkit-gradient(linear, left top, right top, from(#6a11cb), to(#2575fc));
background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
font-size: 1em;
display: table;
margin: 0 auto;
}
#center{
height: 100%;
display: table-cell;
vertical-align: middle;
}
h1{
text-align: center;
vertical-align: top;
margin-bottom: .9em;
font-family: Pacifico;
font-size: 5em;
background: -webkit-gradient(linear, left top, right bottom, from(#d93589), to(#c72b5a));
background: linear-gradient(to bottom right, #d93589, #c72b5a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 0;
cursor: default;
}
form{
max-width: 19.750em;
margin: 0 1em 0 1em;
text-align: center;
}
form input{
width: 100%;
height: 100%;
background: rgba(0,0,0, 0.8);
border: none;
padding: 1em;
margin-bottom: 1em;
color: white;
border-radius: 0.313em;
outline: none;
-webkit-transition: background 0.5s;
transition: background 0.5s;
}
form input:focus{
background: rgba(0,0,0, 1);
}
form input:last-child{
margin-bottom: 0;
}
button{
margin-top: 1em;
background: -webkit-gradient(linear, left top, right top, from(#ec008c), to(#fc6767));
background: linear-gradient(to right, #ec008c, #fc6767);
background-size: 200%;
background-position: left;
text-transform: uppercase;
font-weight: 600;
color: #fff;
border-radius: 2.063em;
padding: 1.250em 2.500em;
max-width: 100%;
border: none;
outline: none;
cursor: pointer;
display: block;
margin: 1em auto;
}
form small a{
display: block;
color: black;
}
.popup{
background: white;
border-radius: .5em;
padding: 12%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<body class="preload">
<div id="center">
<div class="popup">
<h1 class="heartbeat">Lorem.</h1>
<form>
<input style="display:none;" type="text" placeholder="Prezývka" id="nick">
<input type="text" placeholder="Email" id="email">
<input type="password" placeholder="Heslo" id="password">
<input style="display: none;" type="password" placeholder="Heslo znova" id="password-repeat">
<button type="submit">Prihlásiť sa</button>
<small><a href="#" id="register-link">alebo sa zaregistruj</a></small>
</form>
</div>
</div>
</body>希望我帮助过你。祝你有愉快的一天。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？