[Frontend] 6 Methods of CSS Horizontal Centering

Later: [Front] 7 ways to vertically center CSS - karshey's blog - CSDN blog

Centering with equal spacing on the left and right sides

flex

• display: flex;
• justify-content: center;

<div class='parent'>
	<div class="son">
	
	</div>
</div>

.parent {
    
    
	display: flex;
	justify-content: center;
}
.son {
    
    
	background: pink;
	width: 100px;
	height: 100px;
}

Absolute positioning + margin: auto

• center child element
• Son and father, child elementmargin:auto

principle:

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height In the above formula, top and bottom are 0, margin is equal to auto
, At this time, in order to satisfy this equation, the browser will evenly distribute the upper and lower distances to the margin, that is, to achieve the centering effect we want. The same is true for horizontal orientation.

.father {
    
    
	position: relative;
	width: 500px;
	height: 500px;
	background-color: blue;
}

.center {
    
    
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100px;
	height: 100px;
	background-color: red;
}

<div class='father'>
	<div class="center">

	</div>
</div>

Absolute positioning + margin: negative value

Principle: Set the position of the current element to absolute and position it relative to the parent element. First set left: 50%; top: 50%, so that the upper left corner of the current element is at the center of the parent element . Then apply the negative margin property so that the center is at the center of the parent element. Hence the need to know the size of the child elements. Move half the size of the child element.

.father {
    
    
	position: relative;
	width: 500px;
	height: 500px;
	background-color: blue;
}

.center {
    
    
	width: 200px;
	height: 100px;
	background-color: red;
	position: absolute;
	left: 50%;
	margin-left: -100px;
}

<div class='father'>
	<div class="center">

	</div>
</div>

If you want to be centered vertically, you need to add in center:

top: 50%;
margin-top: -50px;

Use negative margins to center elements

positioning+transform

• parent element: relative positioning
• Child elements: relative/absolute positioning is OK
• child element left:50%, left border to the middle of the parent element
• Child element transform: translateX(-50%);, move half of itself to the left, so that its center is aligned with the center of the parent element
• No need to know child element width

.father {
    
    
	position: relative;
	height: 500px;
	width: 500px;
	background-color: blue;
}

.center {
    
    
	position: relative;
	left: 50%;
	width: 200px;
	height: 200px;
	background-color: red;
	transform: translateX(-50%);
}

<div class='father'>
	<div class="center">

	</div>
</div>

text-align: center;

Specifies horizontal centering of element text. is an inline element .

• text-align: center;

.parent {
    
    
    text-align: center;
}

<div class='parent'>
	<span>123</span>
</div>

margin: 0 auto;

• margin: 0 auto;
• If the width is fixed , if the width is not fixed, the width iswidth:100%
• block level element

<div class='box'>是块级元素居中，块级元素内的不居中，想让这行文字也居中要用text-align</div>

.box {
    
    
	background: skyblue;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

mind Mapping

CSS horizontal centering (8 methods), vertical centering (8 methods) - Nuggets (juejin.cn)

Thinking caused by absolute positioning + margin auto vertical centering - Nuggets (juejin.cn)

Use transform to center the positioning element