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

Question

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.

You 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>

Automatically after a level of zooming the screen will pop out from the screen. In that case, the content will be outside the screen. If you are ok with this you can look at my solution. — Nitheesh, Sep 27 '17 at 13:30

score 0 · Answer 1 · edited Sep 27 '17 at 13:17

0

@media only screen and (max-width: 500px) {

}

U can use Media query to adjust as above. I hope this will help you!

edited Sep 27 '17 at 13:17

P.S.

15,970
14
62
86

answered Sep 27 '17 at 13:17

Swapna Suradkar

18
3

Ali Heristchian · Answer 2 · 2017-09-27T14:09:02.360

0

You used absolute position wrongly use this way:

.popup {
    background: white;
    margin: auto;
    width: 90%;
}

After that, you must change your input styles. Use media queries for good design. I suggest you use a responsive framework such as bootstrap.

You can use this too:

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

edited Sep 27 '17 at 14:09

answered Sep 27 '17 at 13:30

Ali Heristchian

41
10

I want to center it verticaly too. – Null Sep 27 '17 at 13:32
You can do that like here: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ – Ali Heristchian Sep 27 '17 at 14:00
I don't want to use flexbox. – Null Sep 27 '17 at 14:02
There is another way too. see this: /*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; } – Ali Heristchian Sep 27 '17 at 14:06
Use vam-container for parent and vam-item for the item. – Ali Heristchian Sep 27 '17 at 14:07
did you see this? https://stackoverflow.com/questions/22658141/css-center-form-in-page-horizontally-and-vertically – Ali Heristchian Sep 27 '17 at 14:29

score 0 · Answer 3 · answered Sep 27 '17 at 13:32

Set a max-height: 100vhto popup class

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

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

So after zooming definitely the content will pop out of div. In that case what should happen? — Nitheesh, Sep 27 '17 at 13:40

score 0 · Answer 4 · answered Sep 27 '17 at 14:27

0

You can add the following rule, which will apply for all windows whose height is less than 400px (= the appr. height of your popup). It will place the popup in the horizontal center at the top of the window and make it scrollable.

@media screen and (max-height: 400px) {
  .popup {
    position: relative;
    top: 0;
    left:0;
    transform: none;
    width: 396px;
    margin: 0 auto;
    }
}

Here it is in your fiddle: https://jsfiddle.net/g86qnjfk/1/

answered Sep 27 '17 at 14:27

Johannes

64,305
18
73
130

Yep, this fixed this, but I would use `position: static;` instead of `position: relative;` – Null Sep 29 '17 at 17:06
you need `postion: relative` for the centering with `margin: 0 auto` – Johannes Sep 29 '17 at 22:55
Had some issues with this ^. Check out my answer. – Null Sep 30 '17 at 08:23

Null · Accepted Answer · 2017-09-29T20:32:32.823

finally I figured out how to fix that. I didn't use display: flex; or even position: absolute; this time. 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.

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

5 Answers5