Vertical and horizontal align middle and center with CSS

Question

I'm not sure which method or methods to utilize to make my div element center the page (both vertically and horizontally) for cross-browser compatibility.

Answer 1

There are many methods :

1. Center horizontal and vertical-align of an element with a fixed measure

CSS

 <div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div> 

---

2 . Center horizontally and vertically a single line of text

CSS

<div style="width:400px;height:200px;text-align:center;line-height:200px;">
<!–content–>
</div>  

---

3 . Center horizontal and vertical-align of an element with no specific measure

CSS

<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div> 

Related Question : Create a horizontal line in CSS