[TOC]

preface

This article introduces horizontal center in CSS. If you just want to read the conclusion, you can skip to the summary at the end of the article.

Center an inline or inline-xxx element horizontally within the parent element

If you want an inline or inline-xxx (inline-block, inline-table, inline-flex, etc.) element to be horizontally centered in the parent element. For example: plain text span/label, link A, input, etc

  • Prerequisite: The parent element must be of type block, or if not, set itdisplay: block
  • How to set: Set for the parent elementtext-align: center

Code:

The parent element {text-align: center;
}
Copy the code

Ex. :

<div class="parent">
    I'm an horizontally-centered inline element (text).
</div>

<div class="parent">
    <a href="# 0" class="child">One</a>
    <a href="# 0" class="child">Two</a>
    <a href="# 0" class="child">Three</a>
    <a href="# 0" class="child">Four</a>
</div>
Copy the code
.parent{
    text-align: center;
    border: 1px solid black;
    margin: 20px 0;
    width: 500px;
    /* height: 100px; * /
}
.child {
    text-decoration: none;
    background: # 333;
    border-radius: 5px;
    color: white;
    padding: 3px 8px;
}
Copy the code

Effect:

Note:

  1. In the CSS above, we don’t have a parent element.parentIf you explicitly set the height, it wraps the child element tightly, as shown in the figure above. If we want it to look nice, we can add some padding and so on. But as long as you don’t explicitly set the height of the parent element, it’s easy to misinterpret this code setting as something that centers the child element vertically as well as horizontally. As for the reasons, please see the discussion in 2 below.
  2. If we are the parent element.parentHow about setting the height explicitly? Changes in the CSS.parentAdd the code to set the height as follows:
.parent{...height: 100px;
}
Copy the code

The effect picture is as follows:

As you can see from the above figure, the code setup described here can only achieve the effect of “horizontally centered child elements”, not vertically centered child elements. And, of course, if not explicitly set height for the parent element, so look from actual effect, can also realize the effect of child elements in the horizontal and vertical, but you need to know the reason, avoid a sudden one day for the parent element explicitly set the altitude, vertical in the original child elements in effect didn’t, you are still confused.

Center the block element horizontally within the parent element

If you want the elements of a block to be horizontally centered within the parent element, such as div, p, etc

  • Prerequisite: The child element must have a fixed width value (otherwise it defaults to the full width of the parent element, so there is no horizontal center problem)
  • How to set: Set the left and right margin of the child element to Auto

    Code: 
    Child elements {margin-left: auto;
    margin-right: auto;
}
Copy the code

Ex. :

<div class="parent">
    <div class="child">
        I'm a block level element and am horizontally centered.
    </div>
</div>
Copy the code
.parent {
    width: 400px;
    /* height: 300px; * /
    background: white;
    margin: 20px 0;
    border: 1px solid black;
}

.child {
    margin: 0 auto;
    width: 200px;
    background: black;
    padding: 20px;
    color: white;
}
Copy the code

Effect:

As in the previous example, we did not explicitly set the padding and height of the parent element, resulting in a rendering that looks like “simultaneously centralizing the child element horizontally and vertically.” But you should also be aware that once the height of the parent element is explicitly set, the child element is no longer vertically centered. For example, we add height: 300px to.parent; , the effect is as follows:

As you can see from the figure above, once the parent element is explicitly set to height, the child element is no longer vertically centered.

Center an inline or inline-xxx or block element horizontally within a parent element, or an inline element horizontally within another inline element

  • Premise:
    1. To center an inline or inline-xxx or block element horizontally within its parent, the premise is:
      • The parent element can be a block element or an inline-block element.
      • A child element to center must have a fixed width value
    2. If an inline or inline-xxx element is horizontally centered within an inline parent, there seems to be no prerequisite. If the parent element does not set the width, it doesdisplay: flexAfter that, it defaults to the width of its parent container.
  • How to set: Use Flex layout for parent elements
  • Code: 
    The parent element {display: flex;
    flex-direction: row;
    justify-content: center;
}
Copy the code

Example 1: The parent element is a block element

<div class="parent">
    <span class="child">span1</span>
    <span class="child">span2</span>
    <span class="child">span3</span>
</div>
<div class="parent">
    <div class="child">div1</div>
    <div class="child">div2</div>
    <div class="child">div3</div>
</div>
Copy the code
.parent {
    width: 500px;
    /* height: 150px; * /
    margin-bottom: 10px;
    background-color: orange;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.child {
    width: 50px;
    height: 100px;
    border: 1px solid black;
    margin: 0 10px;
}
Copy the code

Effect:

Similarly, the above code does not explicitly set the height of the parent element. If the height is explicitly set, for example, height: 150px, it looks like this:

You can’t center the child vertically.

Example 2: The parent element is inline-block

Make a simple change to the CSS code in Example 1 above by adding display: inline-block to.parent; Can be

.parent{...display: inline-block; . }Copy the code

Effect:

From the figure above, the child elements inside each parent are horizontally centered. But because the parent element itself is inline, the two parent elements are placed on one line instead of two lines.

If you add height to the parent element, you will see the following image. Similarly, you cannot center the child element vertically, only horizontally.

Example 3: The parent element is inline

<span class="parent">
    <span class="child">span1</span>
    <span class="child">span2</span>
    <span class="child">span3</span>
</span>
Copy the code
.parent {
    width: 500px;
    /* height: 150px; * /
    margin-bottom: 10px;
    background-color: orange;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.child {
    width: 50px;
    height: 100px;
    border: 1px solid black;
    margin: 0 10px;
}
Copy the code

Effect:

If you add height to the parent element, you will see the following image. Similarly, you cannot center the child element vertically, only horizontally.

conclusion

  1. To center a child element horizontally within its parent, consider the following ideas:
    • Set for the parent element if the child element is inlinetext-align: center;Or set up the Flex layout for the parent element.
    • If the child element is a block element, set the left and right margin to Auto for the parent element, or set the Flex layout for the parent element.
  2. These ideas can also be used to center the child element vertically if the parent element is not explicitly set to height. In this case, set the proper padding for the parent element to achieve the effect of “centering the child element horizontally and vertically with beautiful white space”.

The resources

  • Centering in CSS: A Complete Guide