How to vertical center an object in CSS
First you have to specify what width and heigth that div will be, the div sizes can't change troughout the whole website...
This might be a problem if your content is longer then the div heigth but you can easely set the container of your text to
We start by making a couple of containers to align the main div.
We need to make a div that will place the div to a horizon and a main div that contains our website
We will add following css to the divs:
Don't know why I did this, doesn't really mather cause their will be no content in this div
this the width of the horizon container, this needs to be at 100% so that the container will fill the users browserwindow
We will use poistion absolute to fix the div at any size, the top will be 50% of the screen, so that the div will be at the vertical center of the screen.
But, now the div's top will be positionned at the vertical center, this is not how we want it...
So we need to move the div to move up, half the div's heigth... this is when we need:
this needs to be the same as the widht and heigth in the main container
min-width: 676px; is the minimum width of the container that contains your website content,
min-height: 395px; is the minimum height of the container that contains your website content
width: 676px; is the width of the container that contains your website content
height: 395px; is the height of the container that contains your website content
your margins will be set to auto
Somethings might not be clear to some people, just ask and I'll add it to the post...
First you have to specify what width and heigth that div will be, the div sizes can't change troughout the whole website...
This might be a problem if your content is longer then the div heigth but you can easely set the container of your text to
| Code: |
| "style="overflow:auto" or "style="overflow:scroll" |
We start by making a couple of containers to align the main div.
We need to make a div that will place the div to a horizon and a main div that contains our website
| Code: |
| <div id = "horizon">
<div id = "main"> content of your website </div> </div> |
We will add following css to the divs:
Don't know why I did this, doesn't really mather cause their will be no content in this div
| Code: |
| left: 0; |
this the width of the horizon container, this needs to be at 100% so that the container will fill the users browserwindow
| Code: |
| width: 100%; |
We will use poistion absolute to fix the div at any size, the top will be 50% of the screen, so that the div will be at the vertical center of the screen.
But, now the div's top will be positionned at the vertical center, this is not how we want it...
| Code: |
| position: absolute;
top: 50%; |
So we need to move the div to move up, half the div's heigth... this is when we need:
| Code: |
| margin-top: -197px; |
this needs to be the same as the widht and heigth in the main container
min-width: 676px; is the minimum width of the container that contains your website content,
min-height: 395px; is the minimum height of the container that contains your website content
| Code: |
| min-height: 395px;
min-width: 676px; |
| Code: |
| #horizon
{ left: 0; width: 100%; position: absolute; top: 50%; margin-top: -197px; min-height: 395px; min-width: 676px; } |
width: 676px; is the width of the container that contains your website content
height: 395px; is the height of the container that contains your website content
your margins will be set to auto
| Code: |
| #main
{ width: 676px; height: 395px; margin: auto; } |
Somethings might not be clear to some people, just ask and I'll add it to the post...
