義

居中：盒子在其包含塊中居中，包含塊指的就是盒子的父級

分類

• 水平居中
• 垂直居中

水平居中

• 行盒、行塊盒水平居中

找到行盒 或者行塊盒的父元素，添加css樣式代碼：

{
  text-align: center
}

• 常規流塊盒水平根據中

1. 定寬
2. 設置左右margin為auto

{
  width: 200px;
  margin: 0 auto;
}

• 絕對定位元素的水平居中

1. 定寬
2. 設置左右坐標為0
3. 設置左右margin為auto

{
  width: 200px;
  position: absolute
  left: 0;
  right: 0;
  margin: 0 auto;
}

垂直居中

• 單行文本的垂直居中

設置文本所在元素的行高，為整個區域的高度

{
  height: 200px;
  background: rgb(0, 255, 0);
  line-height: 200px;
}

• 行塊盒或塊盒內多行文本的垂直居中

垂直居中針對行塊盒和塊盒，由于行盒沒有高度，在此略過。

另外此處的文本是直接寫在行塊盒或者塊盒下的，沒有其他元素包裹，這種情況下，是沒有完美解決方法的（如果你有，歡迎交流），不過我們可以借助padding屬性，設置盒子上下內邊距相同，達到類似的居中效果

{
  background: rgb(0, 255, 0);
  display: inline-block;
  padding: 100px 0;
}

• 絕對定位的垂直居中

1. 定高
2. 設置上下坐標為0
3. 設置上下margin為auto

{
  height: 300px;
  background: rgb(0, 255, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

總結

• 常見的行盒

文字元素：span、abbr、em、i、strong、b

圖片和多媒體：img、video、audio

• 部分情況居中時，需要設置盒子高度

好了，本文就寫到這里，如果覺得能幫到你，歡迎關注我，如果覺得有寫的不對的地方，歡迎評論指出來，我會及時改正，相互學習，相互交流才能進步~~~

層疊樣式表(英文全稱:CascadingStyleSheets)是一種用來表現html(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。css不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

CSS能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

CSS中幾種常用的水平垂直居中對齊方法：

文字的水平垂直居中

text-align:center;

line-height:當前元素高度;

元素的水平垂直居中

1使用絕對定位

/*需要固定寬高*/

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

width:xxx;

height:xxx

margin:auto;

2使用絕對定位+calc()

/*需要知道具體的元素寬高值*/

position:absolute;

width:xxx;

height:xxx;

top:calc(50%-xxx/2);

left:calc(50%-xxx/2)

3.使用絕對定位+transform

/*不需要知道元素的寬高*/

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

4.使用display:flex;

display:flex;

justify-content:center;

align-items:center;

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在web設計領域是一個突破，利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

以上是酷仔今日整理的“Web前端基礎教程：CSS中幾種常用的水平垂直居中對齊方法”一文，希望為正在學習Web前端的同學提供參考。

者：張鑫旭

https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/