Today’s article aims to show you how to center the div with a few CSS tricks, both horizontally and vertically. We will also tell you how to center the entire page or a single div element.
Simple centering of a DIV element on a page
This method will work fine in all browsers.
CSS
.center-div
{
margin: 0 auto;
width: 100px;
}
The auto value in the margin property sets the left and right indentation to all the space available on the page. It’s important to remember that the centered div element must be set to width.
Centering DIVinside DIV-element the old-fashioned way
This method of div centering will work in all browsers.
CSS
.outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
width: 100px;
}HTML
<div class="outer-div"><div class="inner-div"></div></div>
The outer div can be placed as you like, but the inner div must have a specified width.
Centering a DIV inside a DIV element with inline-block
In this method of centering the div inside the div, you don’t have to specify the width of the inner element. It will work in all modern browsers, including IE8.
CSS
.outer-div
{
padding: 30px;
text-align: center;
}
.inner-div
{
display: inline-block;
padding: 50px;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
The text-align property only works with inline elements. The inline-block value allows us to display the inner div as an inline element as well as a block (inline-block). Text-align in the external div element allows us to center the internal div.
Center the DIV inside the DIV element horizontally and vertically
Here, margin: auto is used to center the div in the center of the page. The example will work in all modern browsers.
CSS
.outer-div
{
padding: 30px;
}
.inner-div
{
margin: auto;
width: 100px;
height: 100px;
}HTML
<div class="outer-div"><div class="inner-div"></div></div>The internal div element must have a specified width and height. The method won’t work if the external div element has a fixed height.
Center the DIV at the bottom border of the page
Here we use margin: auto and absolute positioning for the external element to center the div vertically. The method will work in all modern browsers.
CSS
.outer-div
{
position: absolute;
bottom: 30px;
width: 100%;
}
.inner-div
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #ccc;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
The inner div must have its width set. The space at the bottom of the page is controlled by the bottom property of the outer div. You can also center the div at the top border of the page by replacing the bottom property with the top property.
Center the DIV on the page vertically and horizontally
Here again, to center the div, margin: auto and absolute positioning of the outer div are used. The method will work in all modern browsers.
CSS
.center-div
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
}
The div element must be set to width and height.
Making adaptive centering of DIV-element on the page
Here, to center the div using CSS, we make the width of the div element adaptive so that it responds to changes in the size of the window. This method works in all browsers.
CSS
.center-div
{
margin: 0 auto;
max-width: 700px;
}
The centered div element must have the max-width property set.
Center the DIV inside the element using the inner block
The inner div element here is adaptive. This method of centering the div inside the div will work in all browsers.properties
CSS
.outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
max-width: 700px;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
The internal div must have the max-width property set.
Centering two adaptive divs next to each other
Here we have two adjacent adaptive div elements. This method of centering the div will work in all modern browsers.
CSS
.container
{
text-align: center;
}
.left-div
{
display: inline-block;
max-width: 300px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 150px;
}
screen and (max-width: 600px)
{
.left-div, .right-div
{
lef max-width: 100%;
}
}
HTML
<div class="container"><div class="left-div"></div><div class="right-div"></div></div>
Here we have several elements with the inline-block property applied inside a centered container. This example also uses CSS media queries; that is, if the screen size is less than 600 pixels, then the max-width property for both the left and right div elements is set to 100%.
DIV element centered with Flexbox
Here we center the CSS div with a Flexbox. It is designed to make it easier to design user interfaces. This module is supported by Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, and Android Browser 40+.
CSS
.container
{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.item
{
background-color: #f3f2ef;
border-radius: 3px;
width: 200px;
height: 100px;
}
HTML
<div class="container"><div class="item"></div><div>
The value of the height property can be anything, but only larger than the size of the centered div element.
