Null Null - 3 years ago 139
CSS Question

When div is centered horizontally and vertically, after zooming in, top of div is not visible

on my page I have one centered div which holds a form. The div is centered to the middle of screen. After zooming in, the top of the div is not visible, why? How should I fix this? It ignores margin as well.

top of the div is not visibleYou can check it live on the test website here.

Thanks!

EDIT: Here's snippet so you don't have to open jsfiddle.



$("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>




Answer Source

finally I figured out how to fix that. I didn't use display: flex; or even position: absolute;. I used display:table; to center the div. The Problem disappeared.

I changed .popup to:

.popup{
  background: white;
  border-radius: .5em;
  padding: 10%;
}

Then I changed body:

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;
}

And added #center div:

#center{
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

I changed HTML as well(wrapped content to #center div).


You can see bellow a snippet with all the code.

$("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>

Hope I helped you. Have a nice day.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download