Languages
[Edit]
EN

CSS - center element horizontally and vertically

7 points
Created by:
OneCricketer
370

In this article, we're going to have a look at how to center element using only CSS.

Quick solution (requires to use only 2 style properties):

use display: flex; with margin: auto;

Example: 

.container {
    border: 1px solid gray;
    width: 100px; height: 100px;
    display: flex; /* <--------- required */
}

.element {
   	margin: auto; /* <---------- required */
    border: 1px solid gray;
    width: 50px;
}

 

The below presented solutions were ordered by ~quality and ~usability of solutions.

The solutions can be divided to three groups:

  • flex layout based,
  • absolute position based,
  • inline elements (e.g. inline blocks or text) centering and other tricks (e.g. table cells).

Look on below examples to see how it works:

1. Flex layout with automatic margin example

This approach uses fact, the automatic margin size centers elemnt inside flex cointainer.

Note: main advantage of this approach is we dont need to set element size.

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <style>

    .container {
        border: 1px solid gray;
        width: 100px; height: 100px;
        display: flex; /* <--------- required */
    }

    .element {
      	margin: auto; /* <---------- required */
        border: 1px solid gray;
        width: 50px;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

2. Grid layout with automatic margin example

This approach uses style property that centers items inside element.

Note: this style is new soltion so be careful using it (we have 2020).

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <style>

    .container {
        border: 1px solid gray;
        width: 100px; height: 100px;
        display: grid; /* <--------------- required */
      	place-items: center; /* <--------- required */
    }

    .element {
      	border: 1px solid gray;
        width: 50px;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

3. Absolute position with translation example

This approach sets left-top 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 working when size of element is not set as fixed.   

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <style>

    .container {
        position: relative; /* <---------------- required */
        border: 1px solid gray;
        width: 100px; height: 100px;
    }

    .element {
        position: absolute; /* <---------------- required */
        left: 50%; top: 50%; /* <--------------- required */
      	border: 1px solid gray;
        transform: translate(-50%, -50%); /* <-- required */
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

4. Absolute position with automatic margin example

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 requirement to set fixed element size.

// ONLINE-RUNNER:browser;

<!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; bottom: 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>

5. Flex layout with center property value example 1

This aproach uses properties that alows to center child elements.

Note: main advantage of this approach is the child elements can be centered vertically different way. 

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <style>

    .container {
        border: 1px solid gray;
        width: 100px; height: 100px;
        display: flex; /* <------------ required */
        justify-content: center; /* <-- required */
    }

    .element {
        align-self: center; /* <------- required */
      	border: 1px solid gray;
        width: 50px;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

6. Flex layout with center property value example 2

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.¬†
// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <style>

    .container {
        border: 1px solid gray;
        width: 100px; height: 100px;
        display: flex; /* <------------ required */
        align-items: center; /* <------ required */
        justify-content: center; /* <-- required */
    }

    .element {
      	border: 1px solid gray;
        width: 50px;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

7. Inline blocks with vertical aligning example

This approach uses fact, each inline element can be centered vertically to sibling element. When sibling elements have 100% height than middle element is vertically centered.

Note: main disadvantage of this approach is horizontal centering with text aligning that cause centering of element content - solution for this problem is reseting element style.

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <style>

    .container {
        border: 1px solid gray;
        width: 100px; height: 100px;
        text-align: center; /* <--------- required */
    }
    
    .container:before, .container:after {
        height: 100%; /* <--------------- required */
        vertical-align: middle; /* <----- required */
        display: inline-block; /* <------ required */
        content: ''; /* <---------------- required */
    }

    .element {
        border: 1px solid gray;
        width: 50px;
        vertical-align: middle; /* <----- required */
        text-align: left; /* <----------- required */   /* reset to default (left) */
        display: inline-block; /* <------ required */
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

8. Inline element with line height equal to container height example

This approach works only with inline elements e.g. text, span, a, etc.

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <style>

    .container {
        border: 1px solid gray;
        width: 200px; height: 100px;
        text-align: center; /* <------- required */
    }

    .element {
        border: 1px solid gray;
        width: 50px;
        text-align: left; /* <--------- required */   /* reset to default (left) */
        line-height: 100px; /* <------- required */   /* container height        */
        display: inline; /* <---------- required */
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

9. Table cell with vertical align example

This approach is based on fact, each table cell content can be vertically centered.

Note: main disadvaintage of this approach is we use table cell element without table stucture.

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <style>

    .container {
        border: 1px solid gray;
        width: 100px; height: 100px;
        display: table-cell; /* <-------- required */
        vertical-align: middle; /* <----- required */
        text-align: center; /* <--------- required */
    }

    .element {
        border: 1px solid gray;
        width: 50px;
        text-align: left; /* <----------- required */   /* reset to default (left) */
        display: inline-block; /* <------ required */
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="element">Some text here...</div>
  </div>
</body>
</html>

10. 50% absolute position example

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

Note: main disadvantage of this approach is the margin and size of element should be set to fixed.

// ONLINE-RUNNER:browser;

<!doctype>
<html>
<head>
  <style>

    .container {
        position: relative; /* <---------- required */
        border: 1px solid gray;
        width: 100px; height: 100px;
    }

    .element {
        margin: -30px -30px; /* <--------- required */   /* -width/2 -height/2 */
        position: absolute; /* <---------- required */
        left: 50%; top: 50%; /* <--------- 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>

 

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

CSS

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join