preface

I still remember being battered by a series of questions from interviewers when I first started my job. “How do you center text?” “Multi-line text?” “Horizontal centering of block-level elements?” “Vertical centering of block-level elements?”… Asked a group of paste in the back of the brain, originally know also do not know how to answer. Center is an unavoidable scene in daily work, and also occurs frequently in interviews. This article focuses on these questions, hoping to help students who have the same doubts as I did in the past, so that they can play with ease when facing the center question in the future work and interview.

The inline elements are centered

The text is centered vertically

A single line of text is vertically centered

Vertical center of a single line of text is easiest. Set line-height to be the same as the box height.

Height is the same as line-height when setting the center of a single line of text. In fact, you don’t need to set height, just set line-height. In this case, the height of the box is supported by line-height. Exactly the same as line-height.

.center{// It is possible not to set the height //height: 20px;
 	line-height: 20px;
}
Copy the code

Multi-line text is vertically centered

1.vertical-align

Vertical-align specifies the vertical alignment of elements in a row.

This method requires one more. The center element wraps around what needs to be centered. Set the parent element’s display to inline-block, so that it behaves like an inline element. Set the parent element’s display to inline-block. Reset the vertical element’s line-height, then set vertical-align: middle; Center the line box vertically inside the box.

<div class="box">
	<div class="center">Although you play the role of passers-by, but are also alive, have a soul.</div>
</div>
<style>
.box {
	background-color: orange;
	line-height: 200px;
	width: 300px;
}
.center {
	background-color: green;
	line-height: 20px;
	display: inline-block;
	vertical-align: middle;
}
</style>
Copy the code
2.table-cell

Vertial-align is used to center the current element vertically, whereas vertial-align is used to center the children of the table-cell element vertically, even if the operator element is a block-level element, so you can use this method to center the block-level element vertically.

.box {
       height: 200px;
       display: table-cell;
       vertical-align: middle;
}
Copy the code

The inline elements are horizontally centered

Text-align controls the horizontal alignment of elements in the child line. This is as simple as setting text-align:center.

.center {
       text-align: center;
}
Copy the code

Block-level elements are horizontally centered

If the margin value is auto, it can occupy all the remaining space in the corresponding direction. If the margin value is set to auto in both directions in the horizontal direction, the remaining space will be evenly divided between the two directions, thus achieving center.

So why have we never used this method to achieve vertical centering? Because the auto value works with a precondition that if you don’t set a specific length in the corresponding direction, it will automatically fill up. Obviously width can be spread over the parent element, but height cannot.

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

Block-level elements are vertically centered

Margin :auto; What about vertical centralization? You can change the block flow by modifying the writing-mode to make the block flow horizontally, then the height direction will default tiling full, set margin:auto; You can center it vertically. This method has a side effect, however, because the inheritability of the writing-mode attribute causes all streams of all children of the element to become horizontal. And the horizontal direction can no longer be centered using this method.

<div class="box"> <div class="center"> <div class="center"> </div> </div> <style> .box { background-color: orange; height: 200px; writing-mode: vertical-lr;; } .center { background-color: green; height: 50px; margin: auto 0; } </style>Copy the code

Is it possible to use this feature to center both vertically and horizontally? It’s also possible. Let’s keep going

Horizontal and vertical center

1. Position (The width and height of the center element are fixed)

Set the absolute position of the parent element and the relative position of the center element. Top, right, bottom, and left are all 0. If no specific width and height is set, the center element will be covered with the parent element in both horizontal and vertical directions. Margin :auto; And you’re absolutely centered.

Note that this method is only compatible with IE8 and above. If your project is compatible with IE7, you can use the following method

.box {
	position: relative;
}
.center {
	position:absolute;
	width: 200px;
	height: 200px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
}
Copy the code

2.vertical-align

First, the horizontal centering of the centering element is implemented. The display value of the centering element is set to inline-clock, so that it has the characteristics of the inline element. Text-align: center; Center the element horizontally.

To center the element vertically, add a helper element and set height to 100%. Make the height of the current box full of the parent element, then set vertical-align: middle; Center it vertically.

<div class="box">
    <div class="assist"></div>
    <div class="center">Although you play the role of passers-by, but are also alive, have a soul.</div>
</div>
<style>
.box {
    background-color: orange;
    height: 200px;
    width: 500px;
    text-align: center;
}
.center {
    background-color: green;
    width: 150px;
    display: inline-block;
    vertical-align: middle;
}
.assist {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
</style>
Copy the code

3. The position match the margin

This method applies to situations where the width and height of the center element are known. Set the relative positioning of the parent element, and the center element is absolutely positioned. The values of left and top are 50%, and the values of left and top are respectively calculated relative to the width and height of the parent element. At this time, the upper left vertex of the center element will be located in the center of the parent element. Then set the margin-left and margin-top of the center element to the negative half of its width and height, so that the center element is offset to the left of 50% of its width in the horizontal direction and 50% of its height in the vertical direction. Then the centering effect can be achieved.

<div class="box">
    <div class="center">Although you play the role of passers-by, but are also alive, have a soul.</div>
</div>
<style>
.box {
    background-color: orange;
    height: 200px;
    width: 500px;
    position: relative;
}
.center {
    background-color: green;
    width: 150px;
    height: 50px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -75px;
    margin-top: -25px;
}
</style>
Copy the code

4. The position coordinate transform

The fourth method is to use position with transform. This approach is similar in principle to the previous one, but uses scenarios with variable width and height elements. Similarly, the relative positioning of the parent element is set first, and the absolute positioning of the center element is set. The values of left and top are 50%. Transform: traslate(-50%, -50%); The percentage value of Translate is calculated relative to itself, so center the element by shifting it horizontally to the left by 50% of its width and vertically up by 50% of its height.

<div class="box">
    <div class="center">Although you play the role of passers-by, but are also alive, have a soul.</div>
</div>
<style>
.box {
    background-color: orange;
    height: 200px;
    width: 500px;
    position: relative;
}
.center {
    background-color: green;
    width: 150px;
    position:absolute;
    top:50%;
    left:50%;
    transform: traslate(-50%, -50%);
}
</style>
Copy the code

5.flex

If you don’t need to consider IE9 compatible and previous browsers, the Flex layout is the most recommended approach.

Set the parent element to the Flex container and center the spindle and cross axes alignment. For more information about Flex, check out God Nguyen’s blog, which is very detailed.

.box {
    display: flex;
    align-items: center;
    justify-content: center;
}
Copy the code