1

I'm trying to put a rounded div in the centre of any size page and make it responsive both vertically and horizontally when resizing the browser.

So far, I've managed to put the div in the middle of a page but it is only horizontally responsive. I need to make it also vertically responsive if possible.

Could you please suggest something?

Here is the code and fiddle 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;
        }
    }
}
Beppe
  • 189
  • 2
  • 4
  • 14
  • You may add this class and give specific height to #login Div element. .absolute-center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } – Devesh Chauhan Nov 15 '16 at 12:00
  • I'm not sure I'm following you. You mean to add ".absolute-center" class as a child of the #login div? – Beppe Nov 15 '16 at 12:04
  • check out this, https://jsfiddle.net/devesh_dc/dzyvmt0o/ – Devesh Chauhan Nov 15 '16 at 12:13
  • Thanks for the example but that's not what I'm after. I've centred the div already, my question is about how to make it fully responsive both vertically and horizontally when resizing the browser. Does it make sense? – Beppe Nov 15 '16 at 12:15
  • if #loginbox has specific height than use top:50% and margin-top:-height_of_#loginbox or use css3 transform animations. – Devesh Chauhan Nov 15 '16 at 12:24

4 Answers4

2

You can use flex-box to center the item horizontally and vertically. You also have to set the height of the body to 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%;
}
marcobiedermann
  • 4,317
  • 3
  • 24
  • 37
  • Unfortunately it has to be compatible with IE9. So I've excluded Flex :/ Thanks anyway! – Beppe Nov 15 '16 at 12:26
  • You could use a polyfill: https://github.com/jonathantneal/flexibility I prefer using the latest web techniques which have solic implementation in modern browsers and use a polyfill / shim for older browsers. If you do not like this approach, you could use the table property to solve your issue – marcobiedermann Nov 15 '16 at 13:42
  • Thanks, very useful. – Beppe Nov 15 '16 at 14:13
1

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>

add round div to top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);

i hope you get the logic

Nandhu
  • 339
  • 4
  • 14
1

You may use the table display properties (understood from IE8):

https://jsfiddle.net/6g2ccpar/3/ or snippet below for test

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

Try this applied to your .login-box:

    width: 60vw;
    height: 60vw;

This should keep both the height and width of your login-box div relative to the width of the view port.

Ben Edwards
  • 168
  • 13