CSS-common methods of centering layout

The article is transferred from Youdao Cloud Notes to the csdn blog. If there is a problem of image loss, you can read the original text

Article Directory

Centering layout is a very painful old problem in CSS. I believe everyone is very annoyed when just getting started. There are also many articles about centering layout on the Internet. It may be difficult to choose a suitable method for everyone because of different scenarios.

Today’s summary will be ranked by scoring, the total score is 5 points

Flex flexible box method

Score: 5 points

Why put Flex first, whether it is horizontally centered or vertically centered, single-line, multi-line, unknown height, etc., flex can be well adapted to solve these problems, and its applicability is the strongest.

Using flex layout to achieve centering, the focus is on the two properties of justify-content and align-items.

Single row centered

HTML

<div class="container">
			<div class="item">广州</div>
</div>

CSS

.container{
				width: 200px;
				height: 100px;
				background-color: aqua;
				display: flex;
				<!--水平居中-->
				justify-content: center
				<!--垂直居中-->
				align-items: center;
				
}
			
.item{
                <!--文本居中-->
			    text-align: center;
			    background-color: red;
}

Insert picture description here

Center multiple rows

HTML

<div class="container">
			<div class="item">广州</div>
			<div class="item">深圳</div>
			<div class="item">北京</div>
</div>

CSS

.container{
				width: 200px;
				height: 100px;
				background-color: aqua;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				
}

Insert picture description here

Center multiple columns

HTML

<div class="container">
			<div class="item">广州</div>
			<div class="item">深圳</div>
			<div class="item">北京</div>
</div>

CSS

.container{
				width: 200px;
				height: 100px;
				background-color: aqua;
				display: flex;
				flex-wrap: row wrap;
				<!--水平等比平分-->
				justify-content: space-evenly;
				<!--垂直居中-->
				align-items: center;
				
			}
			
.item{
				background-color: red;
				text-align: center;
}

Insert picture description here

position + transform method

Score: 4 points

Advantages: The position + transform method can solve the problem of centering when the width and height of the child element is unknown, and it is also suitable for the case where the width and height are known. Can meet the horizontal and vertical centering.

Disadvantages: The sub-elements use absolute positioning, which will break away from the document flow, and all the sub-elements will overlap. Special attention is required, and multiple lines cannot be centered.

Use relative positioning in the parent element and absolute positioning in the child element. At the same time, use left and top to offset the child element from the parent element by 50%, and then use transform to make the child element to the left and top itself. Move 50%, and finally achieve the centering effect.

HTML

<div class="container">
			<div class="child">广州</div>
</div>

CSS

.container{
				width: 50%;
				height: 30%;
				background-color: aqua;
				position: relative;
				
}
			
.child{
				background-color: red;
				text-align: center;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
}

Insert picture description here

margin

Score: 3 points

Use margin: 0 auto can only be centered horizontally, but the prerequisite is to know the width of the child element, and there is nothing to do with vertical centering. It can only work on block-level sub-elements .

HTML

<div class="container">
			<div class="child">广州</div>
</div>

CSS

.child{
                <!--必须设置子元素的宽度-->
				width: 50%;
				background-color: red;
				text-align: center;
				<!--在子元素上设置-->
				margin: 0 auto;

}

Insert picture description here

text-align

Score: 2 points

Text-align can only act on the center of inline elements, and has no effect on block-level elements. Generally, text-align is set on block-level elements to center the inline elements within the block-level elements.

HTML

<div class="container">
			<span>广州</span>
</div>

CSS

.container{
				width: 200px;
				background-color: aqua;
				text-align: center;
				padding: 10px;
				
}

Insert picture description here

to sum up

There are a lot of detailed information about the centering scheme on the Internet. Because there are too many schemes, sometimes it makes me difficult to choose. I don’t know which one is more suitable. I think the above four centering schemes are suitable for more than 80% of common scenarios and are sufficient in development.

Flex layout
position + transform
margin: 0 auto
text-align

Flex layout and position + transform have no special requirements on the width and height of the parent element and the type of child elements (block level, in-line), and it is recommended to choose first.

If the parent element is a block-level element and the child element is an inline element (such as text labels, hyperlinks, etc.), you can choose text-align to center. If there is a Felx layout, it is a bit overkill.

Sometimes the proper use of padding and margin properties can also achieve the centering effect.