[Edit]

CSS - center element horizontally

1 contributors

2 contributions

0 discussions

0 points

Created by:

Kevin

797

In this article, we would like to show you how to center element horizontally using CSS.

Quick solution:

xxxxxxxxxx
 
.element {
    margin: 0 auto;
}

1. Flex layout with center property value

Edit

This aproach uses properties that alows to center child elements.

Note: main advantages of this approach are:

no additional properties are needed,
it can be used to center text or inline element in easy way.

xxxxxxxxxx
 
<!doctype>
<html>
<head>
  <style>
​
    .container {
        border: 1px solid gray;
        width: 100px; height: 100px;
        display: flex; /* <------------ required */
        justify-content: center; /* <-- required */
    }
​
    .element {
        border: 1px solid gray;
        width: 55px;
        height: 55px;
    }
​
  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

Auto running

2. Automatic margin

Edit

This approach uses fact, the automatic margin on X-axis centers element inside cointainer.

Note: main advantage of this approach is we don't need to set element size.

xxxxxxxxxx
 
<!doctype>
<html>
<head>
  <style>
​
    .container {
        border: 1px solid gray;
        width: 100px;
        height: 100px;
    }
​
    .element {
        margin: 0 auto; /* <---------- required */
        border: 1px solid gray;
        width: 50px;
    }
​
  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

Auto running

3. Absolute position with translation

Edit

This approach sets left corner position of internal element in the middle of container and shifts half of element size with relative negative translation.

Note: main advantage of this approach is that it's working when size of element is not set as fixed.

xxxxxxxxxx
 
<!doctype>
<html>
<head>
  <style>
​
    .container {
        position: relative; /* <------------- required */
        border: 1px solid gray;
        width: 100px; height: 100px;
    }
​
    .element {
        position: absolute; /* <------------- required */
        left: 50%;          /* <------------- required */
        border: 1px solid gray;
        transform: translate(-50%, 0); /* <-- required */
    }
​
  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

Auto running

4. Absolute position with automatic margin

Edit

This aproach is based on combination of three styles:

stretch absolute element inside container,
automatic margin to center element inside container,
fixed width to limit maximal element stretching size.

Note: main disadvantage of this approach is the requirement to set fixed element size.

xxxxxxxxxx
 
<!doctype>
<html>
<head>
  <style>
​
    .container {
        position: relative; /* <---------- required */
        border: 1px solid gray;
        width: 100px; height: 100px;
    }
​
    .element {
        margin: auto;              /* <--- required */
        position: absolute;        /* <--- required */
        left: 0; top: 0; right: 0; /* <--- required */
        border: 1px solid gray;
        width: 60px; height: 60px; /* <--- required */
    }
​
  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>