[CSS] Commonly used horizontal and vertical centering and centering layout methods (specific analysis of the content)

Preface

Earlier I summarized an article about several horizontal and vertical centering methods. It can be known that the methods to achieve horizontal and vertical centering are really countless, but each has its own advantages and disadvantages. I want to apply them in practice. In order to use these methods correctly, it is necessary to rely on usual accumulation, and to be familiar with a few of them can deal with most of the centering problems. Recently, I have learned several magical methods, so let’s share them.

text

Horizontal centering method

• text-align+ display:inline-blockUse with attributes.
• table+ marginUse with attributes
• absolute+ transformUse with attributes

Method one, text-align+display:inline-block

#parent{
    
    text-align: center;}
#child{
    
    display: inline-block;}

We first create a normal style

<style type="text/css">
	#parent{
     
     
		width: 100%;
		height: 200px;
		background: pink;
	}
	#child{
     
     
		width: 200px;
		height: 200px;
		background: #987;
	}
</style>

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

The effect displayed at this time is like this.

Let’s add two attributes to the style.

#parent{
    
    
	width: 100%;
	height: 200px;
	background: pink;

	text-align: center;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;

	display: inline-block;
}

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

At this time, the level is centered.

Let's analyze, why use these two attributes? Why use inline-blockit instead of inlineit?

• text-alignAttribute: is to set the alignment for the text content
  left: left alignment
  center: center alignment
  right: right alignment
  Then you will have questions at this time? The initial knowledge of this attribute works on the text, so why does it divalso work on the elements at this time ? The key is that the displayattribute and value are set for the child element inline-block.

displayAttributes have several common attributes::
blockblock-level elements
inline: inline elements
widthand heightattributes will be invalid
inline-block: inline block-level elements (block-level + inline)
widthand heightattributes are valid

When the child element is an inline element, it text-alignwill work.
inline-blockUsing the characteristics of inline elements,
why not set the display property of the child element to inlineit? Because inline elements have their own problems, when we inline an element's inline element, chlidthe widthsum heightattribute will be invalid. You can try inlinethe effect.

So we use inline-blockit to make childthe properties widthand heightproperties effective, in order to achieve the effect we want.

Advantages and disadvantages

• Advantages: The browser compatibility is relatively good, for IE browser version 6-9, text-alignand inline-blockboth are supported.
• Disadvantages: The text-alignattributes are inherited, which causes the text of the child elements to be displayed in the center. (Solved, restore text-alignthe attributes in the child element )

If the text of the child element does not need to be centered, it must be processed. text-alignThe value set in the child element leftcan override the text-alignattribute value of the parent element .

Method two, use with table+ marginattributes

.child{
    
    
	dispaly: table;
	margin: 0 auto;
}	

Add key css content in the normal style of the first method

#parent{
    
    
	width: 100%;
	height: 200px;
	background: pink;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	display: table;
	margin: 0 auto;
}

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

The same effect
analysis is achieved
margin:

1. Set to a value, which means that the upper right, lower left are the same.
2. Set to two values, the first means up and down, and the second means left and right.
3. Set to three values, the first represents up, the second represents left and right, and the third represents down.
4. Set to four values, upper right, lower left.

Provided margin: 0 auto;where autoindicated is automatically assigned according to the browser. So the browser will divide the left and right margins equally

display: table;:
The same effect can be obtained by displaysetting it to block, but the inline style inlinewill childinvalidate the width and height. Therefore, it displaycan be set to two values: table, block.

Advantages and disadvantages

• Advantages: only need to set the child elements to realize the horizontal display in the center
• Disadvantage:
  If the child element leaves the document flow, the value of the margin attribute becomes invalid.
  The so-called element is out of the document flow, the possible situation is that the child element is set to the following three situations, which will invalidate the value of the margin attribute
  • position: absolute;
  • position: fixed;
  • float: left/right

Method three, use with absolute+ transformattributes

#parent{
    
    
	position: relative;
}
#child{
    
    
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

Use normal style plus the above attributes

#parent{
    
    
	width: 100%;
	height: 200px;
	background: pink;
	position: relative;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

Analysis After the
position: absolute;
current element is set to absolute positioning:

• If the parent element has no defined positioning, the current element is positioned relative to the page
• If positioning is enabled for the parent element (under non-positioning static), the current element is positioned relative to the parent element.

left: 50%;
The left distance of the child element relative to the parent element is 50%;

transform: translateX(-50%);
The child element moves half the width of the child element to the left. transform means translation, translateX() means horizontal translation.

Advantages and disadvantages

• Advantages: Whether the parent element is out of the document flow, does not affect the horizontal centering effect of the child element.
• Disadvantages: The transform attribute is a new attribute in CSS3, and the browser support is not good.

Vertical centering method

After talking about the horizontal centering method, here are two common vertical centering schemes. There are two common ways.

• table-cell+ vertical-alginattribute
• absolute+ transformUse with attributes

Method one, table-cell+ vertical-alginuse together

Key code in method one

#parent{
    
    
	display: table-cell;
	vertical-align: middle;
}

The general style is modified into the following form:

#parent{
    
    
	width: 200px;
	height: 300px;
	background: pink;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
}

Add the above key code.

#parent{
    
    
	width: 200px;
	height: 300px;
	background: pink;
	display: table-cell;
	vertical-align: middle;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
}

The effect is as follows:

Analysis is
vertical-align: middle;
used to set the vertical alignment of the text content, and vertical-alignthe values ​​are as follows:

• top: align at the top
• middle: center alignment
• bottom: the bottom of the
  display: table-cell;
  table-cell alignment , which tableis to set the current element as an <table>element, table-cellis to set the current element as an <td>element (cell)

Integrating the two core elements together can achieve the centering effect. When we set the displayattribute of the parent element to table-cellbe equivalent to setting the parent element to a cell in the table, the content of the cell can be aligned in two ways Yes, one is horizontal alignment, and the other is vertical alignment. As a child element, divit is equivalent to the content in the cell, and finally shows the effect of vertical centering.

Advantages and disadvantages

• Advantages: The compatibility of the browser is better (mainly for the old version of the browser, because the content used table-celland the vertical-alginattributes belong to the CSS2 version, and the compatibility of the CSS2 to the old version of the browser is better)
• Disadvantages: vertical-alginAttributes are inherited, causing the text of the parent element to be displayed in the center.

Add text content to the parent element, and this content will also be displayed in the center.

Method two, use with absolute+ transformattributes

Key code

#parent{
    
    
	position: relative;
}
#child{
    
    
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

achieve

#parent{
    
    
	width: 200px;
	height: 300px;
	background: pink;
	position: relative;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

<div id="parent">
	<div id="child">
		垂直居中
	</div>
</div>

This part is similar to the third type of file, which is centered horizontally. You can refer to the above here.

Centered layout

In fact, this is the integration of vertical and horizontal methods.

• table+ marginAchieve horizontal centering, table-cell+ vertical-alginAchieve vertical centering.
• absolute+ transformRealize the centered display in the horizontal and vertical directions.

Method 1: table+ marginrealize horizontal centering, table-cell+ vertical-alginrealize vertical centering

#parent{
    
    
	width: 400px;
	height: 400px;
	background: pink;
	
	display: table-cell;
	vertical-align: middle;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	
	display: table;
	margin: 0 auto;
}

<div id="parent">
	<div id="child">
		居中布局
	</div>
</div>

Advantages and
disadvantages of the first solution Disadvantages:
We can know that the parentmiddle has table-cellactually <td>become a parent element, and childthe tablevalue of middle <table>has become a child element, so here needs to be improved. Modify
the displayattribute value of the child element to blockachieve the same effect, which also solves the problem of language chunks.

#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	
	display: block;
	margin: 0 auto;
}

Advantages: browser compatibility is better.

Method 2: absolute+ transformRealize the centered display in the horizontal and vertical directions

Key code

#parent {
    
    
	position: relative;
}

#child {
    
    
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

It’s easy to understand that it combines horizontal and vertical centering methods and centering through positioning properties.

Implementation code

#parent {
    
    
	width: 400px;
	height: 400px;
	background: pink;

	position: relative;
}

#child {
    
    
	width: 200px;
	height: 200px;
	background: #987;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

Advantages and disadvantages
Disadvantages: relatively poor compatibility
Advantages: can be applied to more scenarios, and the method is good

to sum up

No solution is optimal. We need to achieve the same effect according to actual application scenarios.