• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies

Perfectly center things with css.

User avatar
Danny
VIP - Donator
Posts: 621

Perfectly center things with css.

Thu Jul 03, 2014 9: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!

User avatar
smashapps
Coding Guru
Posts: 960

Re: Perfectly center things with css.

Thu Jul 03, 2014 1: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
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
Posts: 621

Re: Perfectly center things with css.

Thu Jul 03, 2014 2: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 (:

User avatar
smashapps
Coding Guru
Posts: 960

Re: Perfectly center things with css.

Thu Jul 03, 2014 2: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
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
Posts: 1242

Re: Perfectly center things with css.

Thu Jul 03, 2014 5: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;

User avatar
Danny
VIP - Donator
Posts: 621

Re: Perfectly center things with css.

Fri Jul 04, 2014 8:29 am

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

User avatar
mikethedj4
VIP - Site Partner
Posts: 2576

Re: Perfectly center things with css.

Tue Jul 15, 2014 5: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>
Image
Image

Post Reply

Return to “Tutorials”