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.
See the Pen Centering a div within a div, horizontally and vertically by Steve Pear () on CodePen.
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
bottomproperty. You can also center a div at the top of a page, replacing the
See the Pen Centering a div in a page, horizontally and vertically by Steve Pear () on CodePen.
See the Pen Centering a div within a div, inner div responsive by Steve Pear () on CodePen.
inline-blockelements within a centered container. This also uses CSS media queries. When the screen size is less than 600 pixels, the
max-widthproperty of both left and right divs is set to 100%.
Flexbox is supported by Chrome 49+, IE11 and Microsoft Edge, Firefox 37+, Safari 9.1+, Opera 40+, Safari iOS 9.3+, Android 4.4+ and Chrome for Android 53+.