【CSS三種居中方案全解】CSS水平垂直居中常用方法集結

soloplayer、發表於2020-12-09

目錄

  • 前言
  • CSS水平垂直居中
  • 參考資料

系列文章

CSS 水平居中

CSS 垂直居中

一、前言

難得搜尋整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顧知識查漏補缺,又能提升知識增長見識。CSS 本身就沒有道理,以下內容全是個人蒐集整理,參考資料放在最後。居中的方案只是為了實現居中,不代表每個方案都是最好的解決辦法,因為有些方案還是很離譜的,一般用不上。希望能幫助到你們。

話不多 BB,直接上才藝(程式碼演示)

tips:內容挺多的,順著標題找吧

二、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;
	text-align: center;
	width: 300px;
	height: 300px;
	border: 3px solid red;
  }
  .son {
	width: 100px;
	height: 100px;
	background-color: aqua;
	display: inline-block;
  }
</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;
	left: 0;
	right: 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%;
	left: 50%;
	/* 負margin須是高度或寬度的一半 */
	margin-top: -50px;
	margin-left: -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);
	left: 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%;
	left: 50%;
	transform: translate(-50%,-50%);
  }
</style>
  • 效果展示

在這裡插入圖片描述

6、line-height。父元素:line-height=height,text-align:center。子元素:display:inline-block,vertical-align: middle。子元素水平垂直居中,不需要知道子元素的寬高

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

在這裡插入圖片描述

7、flex。目前主流的佈局方案,父元素為 flex 容器且新增 align-items: center,justify-content: 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,justify-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、writing-mode,這是搜尋整理而來,參考資料見最後。子元素和孫子元素盒子 display: inline-block。孫子元素垂直居中,不需要知道該盒子的寬高

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

在這裡插入圖片描述

三、參考資料

張鑫旭 CSS 大佬

百度經驗

相關文章