服务器之家
您的位置： 首页 编程语言 css

「CSS三种居中方案全解」CSS垂直居中常用方法集结

100人浏览   2024-09-20 11:15:09


一、CSS 垂直居中

1、父元素display:table-cell;vertical-align:center，里面的子元素就会实现垂直居中，不需要知道子元素的宽高

/* HTML */
<div class='father'>
  <div class='son'></div>
</div>
<style>
  .father {
	display: table-cell;
	vertical-align: middle;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	width: 50px;
	height: 50px;
	background-color: aqua;
  }
</style>
复制代码
  • 效果展示

2、absolute+margin:auto，定位为 absolute 的元素垂直居中，不需要知道该元素的宽高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	position: relative;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	position: absolute;
	background-color: aqua;
	width: 50px;
	height: 50px;
	top: 0;
	bottom: 0;
	margin: auto;
  }
</style>
复制代码
  • 效果展示

3、absolute+负margin，定位为 absolute 的元素垂直居中，需要知道该元素的宽高

<!-- 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;
	top: 50%;
	/* 负margin须是高度的一半 */
	margin-top: -50px;
  }
</style>
复制代码
  • 效果展示


4、absolute+calc(css3计算属性)，定位为 absolute 的元素垂直居中，需要知道该元素的宽高

<!-- 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;
	/* 注意"-"两边要隔开 减去的须是高度的一半*/
	top: calc(50% - 50px);
  }
</style>
复制代码
  • 效果展示


5、absolute+transform，定位为 absolute 的元素垂直居中，不需要知道元素的宽高

<!-- 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;
	top: 50%;
	transform: translateY(-50%);
  }
</style>
复制代码
  • 效果展示


6、line-height，父元素：line-height=height。子元素：display:inline-block。子元素垂直居中，不需要知道子元素的宽高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	line-height: 300px;
  }
  .son {
	background-color: aqua;
	width: 100px;
	height: 100px;
	display: inline-block;
	vertical-align: middle;
  }
</style>
复制代码
  • 效果展示


7、flex，目前主流的布局方案，父元素为 flex 容器且添加 align-items: center，控制子元素的布局。不需要知道子元素的宽高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	display: flex;
	align-items: center;
  }
  .son {
	background-color: aqua;
	width: 100px;
	height: 100px;
  }
</style>
复制代码
  • 效果展示

8、grid ，目前最强大的布局方案，使用还尚未流行。父元素为 grid，子元素添加 align-self: center。不需要知道子元素的宽高

<!-- 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;
	align-self: center;
  }
</style>
复制代码
  • 效果展示


9、伪元素after或before，这是我搜出来整理的。CSS 真的太神（s）奇（d）了，毫无道理。子元素垂直居中不需要知道宽高

<!-- HTMl -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	display: block;
  }
  .father::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
  }
  .son {
	background-color: aqua;
	width: 50px;
	height: 50px;
	display: inline-block;
	vertical-align: middle;
  }
</style>
复制代码
  • 效果展示


10、隐藏节点(盒子)实现 该原理就是使用盒子占位置，但不显示出该盒子。另外的盒子垂直居中，子盒子的宽高需由实际计算时确定

<!-- HTML -->
<div class="father">
	<div class="hide"></div>
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	background-color: aqua;
	width: 50%;
	height: 50%;
  }
  .hide {
	width: 50px;
	height: 25%;
 }
</style>
复制代码
  • 效果展示


11、writing-mode，这是搜索整理而来，参考资料见最后。子元素盒子 display: inline-block。子元素垂直居中，不需要知道该盒子的宽高

<!-- HTML -->
<div class="father">
	<div class="son"></div>
</div>
<style>
  .father {
	width: 300px;
	height: 300px;
	border: 3px solid red;
	writing-mode: vertical-lr;
	text-align: center;
  }
  .son {
	background-color: aqua;
	width: 100px;
	height: 100px;
	writing-mode: horizontal-tb;
	display: inline-block;
  }
</style>
复制代码
  • 效果展示



相关推荐