常用的水平垂直居中布局

来咯来咯 我来咯 我带着我的博客来咯 哈哈😄 ～

当父元素使用相对定位，子元素使用绝对定位，那么子元素相对于父元素的位置定位

总结

固定宽高 与 不固定宽高 均可实现

只适用于 固定宽高

只适用于 不固定宽高

适用于 文字 水平垂直居中

适用于 图片 水平垂直居中

代码展示

固定宽高 与 不固定宽高 均可实现

• flex布局

<div class='box'>
	<div class='content'>秃头小宝贝</div>
</div>

 <style>
	.box {
		width: 500px;
		height: 500px;
		background: red;
		display: flex;
  		justify-content: center;
  		align-items: center;
	}
 </style>

• flex变异布局

 <div class='box'>
	<div class='content'>秃头小宝贝</div>
 </div>

 <style>
	.box {
		width: 500px;
		height: 500px;
		background: red;
		display: flex;
	}
	.content  {
		margin: auto
	}
 </style>

• grid布局

 <div class='box'>
	<div class='content'>秃头小宝贝</div>
 </div>

 <style>
	.box {
	    width: 500px;
		height: 500px;
		background: red;
		display: grid;
	}
	.content {
		margin: auto
	}
 </style>

• absolute + translate布局

 <div class='box'>
	<div class='content'>秃头小宝贝</div>
 </div>

 <style>
	.box {
		width: 500px;
		height: 500px;
		background: red;
		position: relative;
	}
	.content  {
		position: absolute;
    	top: 50%;
    	left: 50%;
   		transform: translate(-50%, -50%);
	}
 </style>

只适用于 固定宽高

• absolute + margin布局1

 <div class='box'>
	<div class='content'></div>
 </div>

 <style>
	.box {
		width: 500px;
		height: 500px;
		background: red;
		position: relative;
	}
	.content  {
		width: 150px;
		height: 150px;
		background: blue;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
 </style>

• absolute + margin布局2

 <div class='box'>
	<div class='content'></div>
 </div>

 <style>
	.box {
		width: 500px;
		height: 500px;
		background: red;
		position: relative;
	}
	.content  {
		width: 150px;
		height: 120px;
		background: blue;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: - calc(150px  / 2);
		margin-top: - calc(120px / 2); // - 与 calc 之间必须有一个空格
	}
 </style>

只适用于 不固定宽高

• table-cell布局

 <div class='box'>
	<div class='content'>秃头小宝贝</div>
 </div>

 <style>
	.box {
		width: 500px;
 	 	height: 500px;
 	 	background: red;
		display: table-cell;
  		text-align: center;
 		vertical-align: middle;
	}
 </style>

适用于 文字 水平垂直居中

• line-height + text-align布局

 <div class='box'>
	秃头小宝贝
 </div>

 <style>
	.content {
		width: 500px;
 	 	height: 500px;
 	 	background: red;
		line-height: 500px;
		text-align: center;
	}
 </style>

• flex布局

 <div class='box'>
 	秃头小宝贝
 </div>

 <style>
	.content {
		width: 500px;
 	 	height: 500px;
 	 	background: red;
 	 	display: flex;
		justify-content: center;
		align-items: center;
	}
 </style>

适用于 图片 水平垂直居中

• table-cell布局

 <div class='box'>
	<img src='https://img2.baidu.com/it/u=2831766153,1774652559&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' />
 </div>

 <style>
	.box {
  		width: 500px;
  		height: 500px;
  		background: red;
 		display: table-cell;
  		text-align: center;
  		vertical-align: middle;
	}
	.box img {
  		width: 200px;
  		height: 200px;
	}
 </style>

• ::affter布局

 <div class='box'>
	<img src='https://img2.baidu.com/it/u=2831766153,1774652559&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' />
 </div>

 <style>
	.box {
  		width: 500px;
 		height: 500px;
  		background: red;
  		text-align: center;
	}
	.box::after {
  		content: "";
  		display: inline-block;
  		vertical-align: middle;
  		height: 100%;
	}
	.box img {
  		width: 200px;
 		height: 200px;
	}
 </style>

• ::before布局

  <div class='box'>
	<img src='https://img2.baidu.com/it/u=2831766153,1774652559&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' />
 </div>

  <style>
	.box {
  		width: 500px;
 		height: 500px;
  		background: red;
  		text-align: center;
	}
	.box::before {
  		content: "";
  		display: inline-block;
  		vertical-align: middle;
  		height: 100%;
	}
	.box img {
  		width: 200px;
 		height: 200px;
	}
 </style>

• flex布局

 <div class='box'>
	<img src='https://img2.baidu.com/it/u=2831766153,1774652559&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' />
 </div>

 <style>
	.box {
  		width: 500px;
 		height: 500px;
  		background: red;
		display: flex;
 	 	justify-content: center;
 	 	align-items: center;
	}
	.box img {
  		width: 200px;
 		height: 200px;
	}
 </style>

• grid布局

 <div class='box'>
	<img src='https://img2.baidu.com/it/u=2831766153,1774652559&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' />
 </div>

 <style>
	.box {
		width: 500px;
 	 	height: 500px;
 	 	background: red;
 	 	display: grid;
	}
	.box img {
		margin: auto;
	}
 </style>