Perfectly center things with css.

7 posts Page 1 of 1
Contributors
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Perfectly center things with css.
Danny
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!
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

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
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: Perfectly center things with css.
Danny
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 (:
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

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
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 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;
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: Perfectly center things with css.
Danny
yeah it will work for content but not block items I guess.
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 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>
7 posts Page 1 of 1
Return to “Tutorials”