Dead Center
.dead-center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -height/2;
margin-left: -width/2;
height: 70px;
width: 250px;
}
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?!
#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