directory

  • preface
  • The CSS is horizontally centered
  • The resources

CSS center series of articles

The CSS is vertically centered

The CSS is centered horizontally and vertically

One, foreword

A rare search to sort out the CSS vertical center, horizontal center, horizontal vertical center nearly all the scheme. Can not only review the knowledge to fill the gaps, but also enhance the knowledge of knowledge growth. CSS itself doesn’t make sense. The following is a personal collection, with references at the end. The middle solution is only for the purpose of achieving the middle solution, not every solution is the best solution, because some solutions are still so outrageous that they are generally useless. I hope it helps.

No more words BB, go straight to talent (code demo)

Tips: It has a lot of content. Follow the title

2. The CSS is horizontally centered

Almost all vertical centers can be paired with horizontal centers.

1.Text-align :center, a block-level container encloses an inline element horizontally centered,You do not need to know the width and height of the element

/* HTML */
<div class='father'>
  <span class='son'></span>
</div>
<style>
  .father {
	text-align: center;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	width: 50px;
	height: 50px;
	background-color: aqua;
	display: inline-block;
  }
</style>
Copy the code
  • Results show

2,Margin - left: auto, margin - right: auto.Text-align: center center the text inside the block.You don't need to know the width and height of the element, it doesn't matter what the parent element is, it just shows that it's horizontally centered.

/* HTML */
<div class='father'>
  <div class='son'></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 1px solid red;
  }
  .son {
	width: 100px;
	height: 100px;
	background-color: aqua;
	/* The next line of code centers the text horizontally */
	text-align: center;
	margin-left: auto;
	margin-right: auto;
  }
</style>
Copy the code
  • Results show

3,The parent element display: table - cell; text-align:center, the child elements inside will be horizontally centered,You don't need to know the width and height of the child elements

/* HTML */
<div class='father'>
  <span class='son'></span>
</div>
<style>
  .father {
	display: table-cell;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: aqua;
  }
</style>
Copy the code
  • Results show

4,absolute+margin:auto, the element positioned as absolute is horizontally centered,You do not need to know the width and height of the element

/* HTML */
<div class='father'>
  <div class='son'></div>
</div>
<style>
  .father {
	position: relative;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	width: 100px;
	height: 100px;
	background-color: aqua;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
  }
</style>
Copy the code
  • Results show

5,Absolute + negative margin, the element positioned as absolute is horizontally centered,You need to know the width and height of the element

<! -- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	position: relative;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: aqua;
	left: 50%;
	/* The negative margin must be half the width */
	margin-left: -50px;
  }
</style>
Copy the code
  • Results show

6,Absolute +calc(CSS3 calculation attribute), the element positioned as absolute is horizontally centered,You need to know the width and height of the element

<! -- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	position: relative;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: aqua;
	/* Note that the "-" must be separated by half the width or height */
	left: calc(50% - 50px);
  }
</style>
Copy the code
  • Results show

7,absolute+transform, the element positioned as absolute is horizontally centered,You don't need to know the width and height of the element

<! -- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	position: relative;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: aqua;
	left: 50%;
	transform: translateX(-50%);
  }
</style>
Copy the code
  • Results show

Eight,flexIn the current mainstream layout, the parent element is a Flex container and you add context-content: center; Controls the layout of child elements.You don't need to know the width and height of the child elements

<! -- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	display: flex;
	justify-content: center;
  }
  .son {
	background-color: aqua;
	width: 100px;
	height: 100px;
  }
</style>
Copy the code
  • Results show

9,gridAt present, the most powerful layout scheme, use has not yet been popular. The parent element is grid, and the child element is justify-self: center. .You don't need to know the width and height of the child elements

<! -- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	display: grid;
  }
  .son {
	background-color: aqua;
	width: 100px;
	height: 100px;
	justify-self: center;
  }
</style>
Copy the code
  • Results show

10,Hide the node (box) implementationThe principle is to use the box to occupy the position, but not show the box. The other boxes are horizontally centered,The width and height of the sub-box should be determined by actual calculation

<! -- HTML -->
<div class="father">
	<div class="hide"></div>
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	display: inline-block;
	background-color: aqua;
	width: 50%;
	height: 50%;
  }
  .hide {
	display: inline-block;
	width: 25%;
	height: 50px;
  }
</style>
Copy the code
  • Results show

Iii. Reference materials

Zhang Xinxu CSS guru

Experience in baidu