1. General method - fixed width element

html part:
<div class="container">
	<div class="center"></div>
</container>

CSS part:
/*public*/
body,div{
	margin: 0;
}
.container{
	background: beige;
	height: 1000px;
}
/*Centered*/
.center{
	width:300px;
	height:300px;
	margin:auto;
	background: aqua;
}

Disadvantage of this method: inner element must be set (fixed) width

2. Variable width element - set block in row

However, most of the time, we don't know the width of the center element, or its width varies with the background data.

Starting from the following, let's take "paging effect" as an example to explain how to set the horizontal center of "variable width" elements:

html Part (outer layer div.container Omitted):
<div class="pages">
    	<li><</li>
    	<li>1</li>
   	<li>2</li>
   	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    	<li>></li>
</div>

CSS Part (the public part of the previous article is omitted):
/*Paging common*/
li{
    	list-style-type: none;
    	width: 25px;
    	height: 25px;
    	text-align: center;
    	line-height: 25px;
    	background: black;
    	color: #fff;
    	border-radius: 3px;
    	cursor: pointer;
}
li:hover{
    	background: darkorange;
}
/*Set inline block*/
.pages{
    	margin-top: 20px;
    	text-align: center;
}
.pages li{
    	display: inline-block;
}

Disadvantages of this method: the default spacing brought by inline block needs to be solved (automatically set by browser)

3. Variable width element - set floating

By floating, you can avoid the default spacing of inline block brought by browser

Ideas:

1. Relative positioning of outer layer and inner layer

2. Outer layer floats left, inner layer floats left

3. Move the outer layer 50% to the right and the inner layer 50% to the left

html Partially unchanged, to avoid repetition class Change to pages2，The following homomorphism
CSS part:
.pages2{
    	position: relative;
    	float: left;		//The outer layer floats to the left - > the inner layer is just wide enough to open the outer container
    	left: 50%;	//Move outer layer 50% to the right
}
.pages2 li{
    	float: left;
    	position: relative;
    	right: 50%;	//Inner layer moves 50% left
}
.pages2 li:not(:first-child){
    	margin-left:5px;
}

Note: once the float attribute is set for the outer element, the inner layer will automatically just expand the outer width, which is equivalent to setting display: inline block for the outer layer;

4. variable width elements - absolute positioning

Ideas:

1. Absolute positioning of outer layer, relative positioning of inner layer and relative positioning of outer layer

2. Outer layer floats left, inner layer floats left

3. Move the outer layer 50% to the right and the inner layer 50% to the left

CSS part:
.container{
    	position: relative;		//Relative positioning of outer layer
}
.pages3{
    	position: absolute;	//Absolute positioning of outer layer
    	float: left;
    	left: 50%;
}
.pages3 li{
    	float: left;
    	position: relative;		//Relative positioning of inner layer
    	right: 50%;
}
.pages3 li:not(:first-child){
    	margin-left:5px;
}

5. New features of CSS - fit content

The new feature of CSS3, width: fit content, only needs to cooperate with margin: auto to center elements horizontally

(at present, fit content only supports Google and Firefox, but it is very suitable for mobile development!)

.pages4{
    	width: fit-content;
    	width:-moz-fit-content;
    	margin:auto;
}
.pages4 li{
    	float: left;
}
.pages4 li:not(:first-child){
    	margin-left:5px;
}