Page center, various elements center is our development is very common situation, the following to discuss the horizontal center, vertical center and horizontal plus vertical center have what common programs. Our goal is to align the following two divs:

<div class="parent">
  <div class="child">
    DEMO
  </div>
</div>
Copy the code

To make it clear, we give the parent a light grey background and the child a dark grey background. At first we write nothing like this, and the child will fill the parent by default:

Horizontal center

text-align + inline-block

.parent{/* text-align will apply to inline children, set to center and align horizontally */ text-align: center; }. Child {/* display is set to inline-block, the child does not fill the parent, but ADAPTS to the content */ display: inline-block; /* text-align: left; /* text-align: left; }Copy the code

table + margin

Parent2 {}. Child2 {/* display set to table, if the width is not specified, the width is adaptive content */ display: table; /* display table */ * Display table */ margin: 0 auto; } /* If you know the child width, you can directly apply margin auto */Copy the code

The above method is suitable for cases where the width of the parent element is not fixed and the width of the child element is not fixed. If you know the width of the child element, it’s easy to apply margin Auto:

.parent2 {
}

.child2 {
  width: 100px;
    margin: 0 auto;
}
Copy the code

absolute + transform

Parent4 {/* The parent set relative to absolute */ position: relative; } .child4 { position: absolute; /* left: 50%; /* left: 50%; */ transform: translateX(-50%) */ transform: translateX(-50%); }Copy the code

flex + justify-content

This is probably the easiest way to do this, just define context-Content center at the parent level.

.parent5 {
    display: flex;
    justify-content: center;
}

.child5 {
}
Copy the code

flex + margin

The Flex element also supports Margin Auto, so you can write it this way

.parent51 {
    display: flex;
}

.child51 {
    margin: 0 auto;
}
Copy the code

Vertical center

table-cell + vertical-align

Vertical-align takes effect in the table-cell, so set the table-cell to the parent, and then set vertical-align to middle.

.parent6 {
    display: table-cell;
    vertical-align: middle;
}

.child6 {
}
Copy the code

absolute + transform

Similar to horizontal center, the parent is set to relative, the child is set to absolute, and the top is set to 50%. This will make the position slightly lower. Use transform to move it up a bit.

.parent7 { position: relative; } .child7 { position: absolute; top: 50%; /* translateY % is also calculated relative to the element itself */ transform: translateY(-50%); }Copy the code

flex + align-items

This should be the simplest, set flex and align-items: center directly in the parent;

.parent8 {
    display: flex;
    align-items: center;
}

.child8 {
}
Copy the code

Horizontal and vertical center

Horizontal and vertical center directly in front of the horizontal center and vertical center together on the line.

text-align + inline-block + table-cell + vertical-align

.parent9 {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

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

absolute + transform

The absoluate + Transform solution is used to center the center vertically and horizontally.

.parent10 {
    position: relative;
}

.child10 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

flex

Here we go again with our favorite Flex, don’t be too easy to center!

.parent11 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.child11 {
}
Copy the code

Sample code:

Github.com/dennis-jian…

At the end of this article, thank you for your precious time to read this article. If this article gives you a little help or inspiration, please do not spare your thumbs up and GitHub stars. Your support is the motivation of the author’s continuous creation.

Welcome to follow my public numberThe big front end of the attackThe first time to obtain high quality original ~

“Front-end Advanced Knowledge” series:Juejin. Im/post / 5 e3ffc…

“Front-end advanced knowledge” series article source code GitHub address:Github.com/dennis-jian…