Codenstuff.com

Posted: **Thu Jul 03, 2014 8:22 am**

Well I've been busy with web development a lot lately, also going to get my HTML(5), CSS(3) and java certificate this year.

So this is an issue for many designers who just can't get an element centered in a parent container.

Solution one: Horizontal and vertical centered
We are going to use relative and absolute positions in this one.

Parent container:

Code: Select all

body {position:relative;}

Child element:

Code: Select all

div {
width:200px;
height:200px;
background:#000;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}

huh? why the margin top -100px, well this way you'll get the absolute center of the element. It's positioned at 50% from the top of the parent container, in this case from the body.

Solution two: Horizontal centered without knowing the width
This one is a bit tricky, older browsers won't support this method. But who cares about older browsers people need to be updated (:

Child element:

Code: Select all

div {
height:200px;
background:#000;
display:table;
margin:0 auto;
}

easy as pie! use the display table to get the element centered without knowing the width.

this is it folks, I will be online a bit more and help where ever is needed with design and development.
Cheers!

Posted: **Thu Jul 03, 2014 12:52 pm**

Nice tutorial here

You can also center divisions and other components easily with CSS like this:

Code: Select all

width: 100px; /* size doesn't matter */
margin: auto;

Edit: It's not vertical and horizontal though, it's just horizontally centered

Posted: **Thu Jul 03, 2014 1:16 pm**

smashapps wrote:
Nice tutorial here

You can also center divisions and other components easily with CSS like this:
Code: Select all
width: 100px; /* size doesn't matter */
margin: auto;
Edit: It's not vertical and horizontal though, it's just horizontally centered

Not really, this won't work. you need to define it's display, block, inline-block etc.
and it is both horizontal and vertical because I center it also from top to bottom (:

Posted: **Thu Jul 03, 2014 1:38 pm**

It's how I center a division on a website when i have a 3 column website, the content generally in the middle, always works fine for me. I would image something centered horizontally and vertically would be for i.e a landing page/splash page

Posted: **Thu Jul 03, 2014 4:48 pm**

Yep, #smashapps' code also works for me when I center page content horizontally, but it's nice to also have code to center things vertically as well cooll;

Posted: **Fri Jul 04, 2014 7:29 am**

yeah it will work for content but not block items I guess.

Posted: **Tue Jul 15, 2014 4:23 am**

http://codepen.io/mikethedj4/pen/sugqd

A lot of times I don't know what the height of an element would be, but I still want to vertically align it to the center. If you come across this problem try using this method.

CSS:

Code: Select all

body {
  background: rgb(0, 28, 66);
  font: 20px arial;
}

header:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  color: rgb(255, 255, 255);
  text-align: center;
  overflow: auto;
}

nav { 
  display: inline-block;
  vertical-align: middle;
}

HTML:

Code: Select all

<header>
  <nav>
    <h1>
    	Hello world!
    </h1>
  </nav>
</header>

Full Code: (Rendered with Mirrored Mockup Design)

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>new document</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<style type='text/css'>
body {
  background-color: rgb(0, 55, 81);
  font-family: arial;
  color: rgb(255, 255, 255);
  font-size: 24px;
  text-align: center;
}
.box h1 {
  display: inline-block;
  vertical-align: middle;
}
.box:before {
  height: 100%;
  display: inline-block;
  content: '';
  vertical-align: middle;
}

.box {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  overflow: auto;
}


</style>
</head>
<body>

  <div class="box">
    
  <h1 class="">
    Hello world!
  <br>
    
  </h1>
    
  </div>
    
</body>
</html>

Codenstuff.com

Perfectly center things with css.

Perfectly center things with css.

Re: Perfectly center things with css.

Re: Perfectly center things with css.

Re: Perfectly center things with css.

Re: Perfectly center things with css.

Re: Perfectly center things with css.

Re: Perfectly center things with css.