Centering elements horizontally and vertically is a very common requirement in CSS. But this one seems to be extremely simple to implement in theory, but in practice, it often stumbles a lot of people.

Horizontally centered elements are relatively simple: if it is an inline element, text-align: center is applied to its parent element; If it is a block-level element, apply margin: Auto to itself.

When it comes to vertically centering an element, however, it’s not that easy, and sometimes the thought of it is mind-numbing.

In this paper, the inline elements and block level elements are explained respectively, and the current more popular implementation methods are collected and analyzed to achieve the principle, which is convenient for everyone to refer to. It is important to note that none of these approaches is perfect, and the key is to determine which implementation approach is the most appropriate for your needs.

Inline elements

First let’s write the basic code:

<div class="main">
    <span class="content">I want to center the inline element span</span>
</div>
Copy the code
.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
}

.content {
    background-color: #5b4d4e;
    color: #FFFFFF;
}
Copy the code

The div with class as.main wraps around the span element with class as.content. We want the.content element to be centered within the.main element.

Horizontal center

text-align

The horizontal center of the inline elements is easier. We simply add text-align: center to the.main; Then. Main changes to:

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    text-align: center;  /* Horizontal center */
}
Copy the code

How it works: Set text-align to center, because this attribute dictates how the text in the element is aligned horizontally, and center will center the text horizontally.

Vertical center

line-height

Vertical centring of inline elements is explained by one or more lines or images.

If it is a line, then we can use line-height, and the.main element CSS code changes to:

.main {
    width: 300px;
    height: 300px; /* You can do this without */
    background-color: #50ba8b;

    line-height: 300px; /* Vertical center */
}
Copy the code

You can center text vertically by setting line-height, but you don’t need to set height at the same time.

How it works: This vertical center takes advantage of CSS’s “upper and lower line spacing” mechanism, which explains why it only works for a single line of text.

And one more thing to note is that this way is the vertical center “approximation” is not a perfect vertical center, because the vertical centerline position common text font than real “line box, box” vertical centerline position is low, and because we usually use the font – the relatively small size, this deviation is not easy to realize, So it’s vertically centered in the senses.

The line – height and vertical – align

Let’s talk about the vertical center effect of multiple lines or images. Here we need to use both line-height and vertical-align to achieve this effect.

Wrap the text first:

<div class="main">
    <span class="content">I want to center the inline element span<br>I want to center the inline element span</span>
</div>
Copy the code

Take a look at the modified CSS code:

.main {
    width: 300px;
    background-color: #50ba8b;

    line-height: 300px;
}

.content {
    display: inline-block;
    background-color: #5b4d4e;
    color: #FFFFFF;
    line-height: 20px;
    margin: 0 20px;
    vertical-align: middle;
}
Copy the code

Implementation principle:

  1. Set up the.contentThe display element is inline-block. The effect is to reset the external line-height to normal size while maintaining the inline element characteristics, allowing the vertical-align attribute to be set and a critical “line box” to be generated. What we really need is not this line-box, but a product that comes with every line-box — a ghost blank node, an invisible node of zero width that behaves like a regular character. With this “ghost blank node”, ourline-height: 300px;You have an object that you’re acting on, which is equivalent to.contentThe element is preceded by an inline element 300px in height and 0 in width.
  2. Since inline elements are baselined by default, we use pairs.contentElement setvertical-align: middle;To adjust the vertical position of multiple lines of text to achieve the “vertical center” effect we want. This approach also worksImages and other replacement elementsThe vertical center effect of. Of course, the “vertical center” here is also approximate, which is caused by vertical-align. Why can we know more about itvertical-align: middle;.

Block-level elements

Let’s start with the basic code:

<div class="main">
    <div class="content">I'm going to center the block-level element div</div>
</div>
Copy the code
.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;
}
Copy the code

A div with class.main wraps around a block-level div with class.content. The goal is to center the.content element within the.main element.

position + margin: auto

The implementation code is as follows:

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    /* Key code */
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /* Key code */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
Copy the code

Implementation principle:

  1. Set up the.mainElement is relative positioningposition: relative;, so that its child sets the absolute position relative to it.
  2. And then set.contentElement is absolute positioningposition: absolute;And set it uptop,left,bottom,rightAre 0, so that the dimensions of the elements of the element are represented as “format width and format height”, and<div>Is the same as the “normal flow width” of the external size, which is the size available to the parent element automatically filled in, but since we set it at this point.contentThe width and height of the element limits the element’s auto-filling, which creates an extra 150px of space.
  3. And finally we set.contentElements formargin: auto;At this time, according to the calculation rules of Auto, the upper, lower, left and right remaining Spaces are all equally divided, so it is naturally centered.

position + margin-left/top

The implementation code is as follows:

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    /* Key code */
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /* Key code */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: -75px;
}
Copy the code

Implementation principle:

  1. Set up the.mainElement is relative positioningposition: relative;, so that its child sets the absolute position relative to it.
  2. And then set.contentElement is absolute positioningposition: absolute;And set thetop: 50%;,left: 50%;So that the.contentThe upper-left corner of the element is located.mainThe center of the element.
  3. The last set.contentThe elementmargin-left: -75px;,margin-top: -75px;Move yourself left and up half the width and height, like this.contentThe center of the element is.mainThe center of the element is naturally centered.
  4. The downside of this approach is that it requires fixation.contentThe width and height of the element.

position + translate

The implementation code is as follows:

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    /* Key code */
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /* Key code */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%); }Copy the code

Implementation principle:

  1. Set up the.mainElement is relative positioningposition: relative;, so that its child sets the absolute position relative to it.
  2. And then set.contentElement is absolute positioningposition: absolute;And set thetop: 50%;,left: 50%;So that the.contentThe upper-left corner of the element is located.mainThe center of the element.
  3. The last set.contentThe elementtransform: translate(-50%, -50%);Move yourself left and up half the width and height, like this.contentThe center of the element is.mainThe center of the element is naturally centered.
  4. The advantage of this method is that it doesn’t need to be fixed.contentThe width and height of the element.

Flexbox

The implementation code is as follows:

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;

    /* Key code */
    display: flex;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /* Key code */
    margin: auto;
}
Copy the code

Implementation principle:

  1. Set up the.mainThe elementdisplay: flex;.
  2. And then set.contentElements formargin: auto;Can achieve center.
  3. This is arguably the best solution and we don’t need to set it up.contentElement is absolute positioning,margin: autoIt works naturally with width and height, and we don’t need to set it.contentThe width and height of the elements, because Flexbox was designed specifically for this type of need.
  4. The downside is that current browser support is lower than other approaches.

Another benefit of Flexbox is that it can also center anonymous containers (that is, text nodes that are not wrapped in tags) vertically. For example, we don’t set the. Main element to display: flex; Instead, set the.content element to display: flex; And with the introduction of the Flexbox specification of the align-items and context-content properties, we can center the text inside it as well. (We can use the same properties for the.main element to center the.content element, but margin: The auto method is a little more elegant, and it also backs back.

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /* Key code */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
Copy the code

Please indicate the source of reprint, thank you!