Centering a div in Skeleton

Question

For a project of mine, I'm using Skeleton Boilerplate for the first time. And I'm looking for the best practice of centring a div in Skeleton without bashing into the rules of Skeleton.

At the moment, I've the following structure for a login page.

HTML:

<div class="container">
<div class="sixteen columns vertical-offset-by-one">
<div id="loginBox">
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
<form action="" id="loginForm">
<input type="text" name="username" required placeholder="username" class="loginTextField">
<input type="password" name="password" required placeholder="password" class="loginTextField">
<input type="submit" value="Log In" class="loginButton" />
</form>
</div><!-- loginBox -->

</div><!-- sixteen columns -->

<div class="sixteen columns">
<p align="center"><a href="registration.html" target="_blank">Click here to register</a></p>
</div>
</div><!-- container -->

CSS:

#loginBox, #registrationBox {
  width: 470px;
  height: 450px;
  background-color: white;
  left: 245px; */
  top: 20px; */
  position: relative; 
  margin: 0px auto;  }

#registrationBox {
  height: 500px; }

.yeditepeLogo {
  position: relative;
  left: 40px;
  top: 33px; }

#loginForm, #registrationForm {
  position: relative;
  top: 45px; }

.loginTextField, .registrationTextField {
  position: relative;
  height: 40px;
  width: 388px;
  left: 40px;
  border-color: #dedede;
  border-style: solid;
  border-width: 1px;
  margin-bottom: 10px;
  text-align: left;
  font-size: 18px;
  text-indent: 10px;
  -webkit-appearance: none; }

.loginTextField:focus, .registrationTextField:focus {
  outline-color: #ff9800;
  outline-style: solid;
  outline-width: 1px;
  border-color: white; }

.loginTextField:nth-child(2), .registrationTextField:nth-child(3) {
  margin-bottom: 40px; }

.loginButton, .registrationButton {
  background-color: #77a942;
  position: relative;
  border: none;
  width: 390px;
  height: 60px;
  left: 40px;
  color: white;
  font-size: 24px;
  text-align: center;
  opacity: 0.8; }
  .loginButton:hover, .registrationButton:hover {
    opacity: 1; }

As you can see, that #loginBox has a fixed width/height and it should always be on the centre of the page. margin: 0px auto code gives it the horizontal centring. But is it the best practice in Skeleton? Does Skeleton provide a better way?

Also how can I provide it's vertical centring?

Eryn

Answer 1

There's actually a built in way of centering divs in Skeleton.

<div class="sixteen columns">
    <div class="four columns offset-by-six">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

The offset-by-six in this case can be altered from one to fifteen, and offsets the column at hand by as many columns as entered. As a neat feature, the offsetting is not affecting alignment when smaller screens are used.

To clarify: This doesn't center the actual content in the div, but centers the div itself.

Programmer

Answer 2

I know it has been a while since this question was asked, but maybe somebody else can use the answer. I was able to accomplish centering with Skeleton by filling one-third column class with a space, then the next one-third column class with content, then another one-third column class with a space again.

<div class="one-third column">&nbsp;</div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column">&nbsp;</div>

Zionism

what a disgusting hack – Phenobarbital

Answer 3

You can set the container to

.container {
           position: absolute;
           top: 50%;
           left: 50%;
           margin-left: -43 //replace with half of the width of the container
           margin-top: -52 //replace with half of the height of the container
 }

set the parent container or element to position: relative;

Here's a good article about How to Center Anything With CSS

Nutter

Answer 4

Asus3000's answer is good as that is what I do and it works well. I would only add that on mobile, it adds quite a bit of unwanted vertical space. To avoid mobile vertical space, I use a class .filler and hide it on mobile.

HTML

<div class="one-third column filler">&nbsp;</div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column filler">&nbsp;</div>

CSS

/* or whatever mobile viewport */
@media only screen and (max-width: 960px) {
  .filler { display: none}
}

Kremenchug

Answer 5

A way I believe works pretty good is:

  <div class="container">
   <div class="row">
    <div class="two-half column">
     centered div content
    </div>
   </div>
  </div>

This makes the div centered and responsive. You can change margin-top to make it all the way in the middle, however changing width will (of course) not make it centered anymore.

Correct me if I'm wrong but this works for me! :)

Creepie