導(dǎo)引:

方案一 { keyword: padding & margin }
方案二 { keyword: vertical-align }
方案三 { keyword: absolute | relative }
方案四 { keyword: flex }
方案五(文字垂直居中) { keyword: text-align | line-height }

方案一{ keyword: padding & margin }

提要簡介: 運(yùn)用 padding(父容器) + margin (子元素) + text-align:center;(父容器的子元素是內(nèi)聯(lián)元素時(shí))

應(yīng)用場景一:

1. 父元素 和 子元素 都是 塊級(jí)元素
2. 父元素 寬度(可定也不不定), 高度不定.

<!-- html -->
<div class="parent">
     <div class="son"></div>
   </div>

/* css */
.parent {
  background: #ddd;
  width: 300px;
  padding: 40px 0;  /* 父容器用padding擠壓子元素 實(shí)現(xiàn)子元素垂直居中 */
}
.son {
  width: 50px;
  height: 50px;
  background: red;
  margin: 0 auto; /* 塊級(jí)子元素 水平居中 */
}

示圖:

11111.png

應(yīng)用場景二:

1. 父元素是塊級(jí)元素, 子元素為內(nèi)聯(lián)元素
2. 父元素 寬度(可定可不定), 高度不定.

<!-- html -->
<div class="parent">
     <span>x</span>
   </div>

/* css */
.parent {
  background: #ddd;
  width: 300px;
  text-align: center; // 使父容器內(nèi)的 內(nèi)聯(lián)元素水平居中 
  padding: 40px 0; // 父元素不定高度值, 由padding把內(nèi)聯(lián)子元素?cái)D到垂直居中
}
.parent span {
  width: 50px;
  height: 50px;
  background: red;
}

示圖:

22222.png

方案二 { keyword: vertical-align }

運(yùn)用 vertical-align: middle;(垂直方向) 和 父容器設(shè)置 text-align:center(水平方向)

應(yīng)用場景一:

1. 子元素 必須是 內(nèi)聯(lián) 或 內(nèi)聯(lián)塊元素
2. 水平居中交給 --> 父元素: text-align:center;
3. 垂直居中交給 --> vertical-align: middle;父元素 利用 偽類元素 作為參考 來 和 子元素 垂直居中對(duì)齊.

<!-- html -->
<div class="parent">
     <div class="son"></div>
   </div>

/* css */
.parent {
  background: #ddd;
  width: 300px;
  height: 300px;
  text-align: center;  /*  讓內(nèi)聯(lián)子元素水平居中對(duì)齊 */
  vertical-align: middle;  /* 對(duì)齊方式為 垂直居中 */
  
}
.parent .son {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: red;
  vertical-align: middle; /* 對(duì)齊方式為 垂直居中 */
}

.parent::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 1px;
  background: green;
  vertical-align: middle; /* 對(duì)齊方式為 垂直居中 */
}

示圖

33333.png

方案三 { keyword: absolute | relative }

運(yùn)用 position: relative | absolute ; 和 transform: translate: (-50%, -50%); 的實(shí)現(xiàn)方案.

應(yīng)用場景一: relative

1. 子元素可以是 內(nèi)聯(lián) 或 塊級(jí)元素
2. 父元素 寬高固定
3. 子元素調(diào)用css3樣式: transform

<!-- html -->
   <div class="parent">
     <div class="son">x</div>
   </div>

/* css */
.parent {
  background: #ddd;
  width: 300px;
  height: 300px;
}
.son {
  display: inline | inline-block | block;  /* 子元素為 塊級(jí) 和 內(nèi)聯(lián) 都可以 */
  width: 50px;
  height: 50px;
  background: red;
  position: relative;  /* 相對(duì)定位,子元素默認(rèn)位置是在左上角 */
  top: 50%;  /* 子元素頂線 對(duì)齊 父元素的水平中線 */
  left: 50%; /*  子元素的左側(cè)邊線 對(duì)齊 父元素的垂直中線 */
  transform: translate(-50% ,-50%); /* 子元素以 參考自身寬高 來計(jì)算 變形位移距離  */
}

示圖:

44444.png

應(yīng)用場景二: absolute

1. 子元素可以是 內(nèi)聯(lián) 或 塊級(jí)元素
2. 父元素 寬高固定
3. 子元素調(diào)用css3樣式: transform

<!-- html -->
   <div class="parent">
     <div class="son">x</div>
   </div>

/* css */
.parent {
  background: #ddd;
  width: 300px;
  height: 300px;
  position: relative;  /* 父元素設(shè)置為 子元素的定位參考,必不可少 */
}
.son {
  display: inline | inline-block | block;  /* 子元素為 塊級(jí) 和 內(nèi)聯(lián) 都可以 */
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;  /* 絕對(duì)定位,子元素默認(rèn)位置是在左上角 */
  top: 50%;  /* 子元素頂線 對(duì)齊 父元素的水平中線 */
  left: 50%; /*  子元素的左側(cè)邊線 對(duì)齊 父元素的垂直中線 */
  transform: translate(-50% ,-50%); /* 子元素以 參考自身寬高 來計(jì)算 變形位移距離  */
}

示圖:

55555.png

方案四 { keyword: flex }

提要: 運(yùn)用 flex 布局, 主軸對(duì)齊調(diào)用 justify-content, 側(cè)軸(交叉軸)對(duì)齊 align-items.

應(yīng)用場景一:

1. 父子元素 塊級(jí) 內(nèi)聯(lián)都可以
2. 水平居中: justify-content: center;
3. 垂直居中: align-items: center;

<!-- html -->
  <div class="box">
    <div class="son"></div>
  </div>

/* css */
.box {
  width: 400px;
  height: 400px;
  background: #ddd;
  border: 1px solid red;
  
  display: flex;  /* 元素設(shè)置為flex, 此元素的 display:felx */ 
  justify-content: center; /* 水平居中設(shè)置 */
  align-items: center;   /* 垂直居中設(shè)置 */
}
.box .son {
  width: 100px;
  height: 100px;
  background: blue;
}

圖示:

3123123.jpg

方案五(文字垂直居中) { keyword: text-align | line-height }

提要: 文字居中 依據(jù) 父元素 text-align, 子元素里　line-height;

應(yīng)用場景一:

1. 父子元素 塊級(jí) 內(nèi)聯(lián)都可以
2. 水平居中: 父容器text-align: center;
3. 垂直居中: 文字標(biāo)簽 line-height: (number= wrapper.height) px ;

<!-- html -->
  <div class="box">
    <p>xxxxx</p>
  </div>

/* css */
* {   /*  設(shè)置通類,必須 */
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {

border: 1px solid red;
width: 100px;
height: 100px;
background: #ddd;
text-align: center;  /* 文字水平居中 */
}
.box p {

line-height: 100px; /* 文字垂直方向居中,參數(shù)等于父容器高度值 */
}

圖示:

77777.png