CSS Alignment - Rexy.me

Dead Center

.dead-center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -height/2;
margin-left: -width/2;
height: 70px;
width: 250px;
}

Demo

what is the difference between inline element & block element with text-align:center?

A block element defaults to being the width of its container. It can have its width set using CSS, but either way it is a fixed width.

An inline element takes its width from the size of its content text. (width: auto)

text-align is applicable to text inside block/inline elements only

To align block element (with specified width), use margin: 0 auto;

A simpler way to right-align a block-level element:

.block {
 background-color: blue;
 margin-left: auto;
 margin-right: 0;
 height: 100px;
 width: 250px;
 }

Absolute Alignment

.block {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
/* or
left: 0;
right: 0;
// doesn't work in IE6,7
*/
 }

Vertical Align

Ref: What’s vertical align? – CSS Tricks

How do I vertically align text next to an image with CSS?

<div>
   <img style="width:30px;height:60px;vertical-align:middle">
   <span style="">Works.</span>
</div>

Understanding vertical-align, or “How (Not) To Vertically Center Content”‘

So how do I vertically-center something?!

1	`#myoutercontainer2` `{` `line-height:4em` `}` `/* Single line of text */`

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

How to properly vertically align an image

.frame {
    margin: 1em 0;
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}
img {
    max-height: 25px;
    max-width: 160px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #3A6F9A;
}

Altogether: 5 methods to vertically center any element

Ref: Horizontally Centered Menus with no CSS hacks