Center An HTML Element Using CSS

June 21, 2018 by David Ugale

There are two approaches that we commonly use to center an element. The first approach uses the CSS margin property. The second approach uses absolute positioning and the CSS transform property.

Using margin To Center An Element

In this approach, we center the element by using auto to set the left and right margins. Note that the centered element must have a value set for the width (i.e. 200px) and the element must be set to a block element.

Centered Element

HTML


<div id="container-element">
    <div id="centered-element">
        Centered Element
    </div>
</div>

CSS


#container-element {
    border: solid red 5px;
    float: left;
    height: 200px;
    width: 100%;
}
#centered-element {
    border: solid blue 5px;
    display: block;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 200px;
}

Using transform To Center An Element

Centered Element

HTML


<div id="container-element-2">
    <div id="centered-element-2">
        Centered Element
    </div>
</div>

CSS


#container-element-2 {
    border: solid red 5px;
    float: left;
    height: 200px;
    position: relative; /* important! */
    width: 100%;
}
#centered-element-2 {
    border: solid blue 5px;
    display: block;
    height: 100%;
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    width: 200px;
}