text-alignproperty a value of
center, but then things tend to get a bit sticky. When you get to centering a div vertically, you can end up in a world of CSS hurt.
The aim of this article is to show how, with a few CSS tricks, any div can be centered; horizontally, vertically or both. And within the page or a div.
marginproperty sets the left and right margins to the available space within the page. The thing to remember is your centered div must have a
text-alignproperty only works on inline elements. The
inline-blockvalue displays the inner div as an inline element as well as a block, so the
text-alignproperty in the outer div centers the inner div.
heightproperty. This doesn't work if the outer div has a fixed height.
widthproperty. The gap from the very bottom of the page is set in the outer div's
paddingproperty having a right value including the
widthproperty of the right div. The right div is displayed in front of the left div via the
The right div is also made responsive using CSS media queries. When the screen size is less than 990 pixels, the right div is displayed below the left div.
The left div has its
padding value reset, removing the
width value of the right div. The right div has
position changed to relative from fixed, and the
width property set to the width of the page.