CSS: <垂直居中> 方案解析

导引:

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

---

方案一{ keyword: padding & margin }

提要简介: 运用 padding(父容器) + margin (子元素) + text-align:center;(父容器的子元素是内联元素时)

应用场景一:

1. 父元素 和 子元素 都是 块级元素
2. 父元素 宽度(可定也不不定), 高度不定.

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

/* css */
.parent {
  background: #ddd;
  width: 300px;
  padding: 40px 0;  /* 父容器用padding挤压子元素 实现子元素垂直居中 */
}
.son {
  width: 50px;
  height: 50px;
  background: red;
  margin: 0 auto; /* 块级子元素 水平居中 */
}

示图:

11111.png

应用场景二:

1. 父元素是块级元素, 子元素为内联元素
2. 父元素 宽度(可定可不定), 高度不定.

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

/* css */
.parent {
  background: #ddd;
  width: 300px;
  text-align: center; // 使父容器内的 内联元素水平居中 
  padding: 40px 0; // 父元素不定高度值, 由padding把内联子元素挤到垂直居中
}
.parent span {
  width: 50px;
  height: 50px;
  background: red;
}

示图:

22222.png

方案二 { keyword: vertical-align }

运用 vertical-align: middle;(垂直方向) 和 父容器设置 text-align:center(水平方向)

应用场景一:

1. 子元素 必须是 内联 或 内联块元素
2. 水平居中交给 --> 父元素: text-align:center;
3. 垂直居中交给 --> vertical-align: middle;父元素 利用 伪类元素 作为参考 来 和 子元素 垂直居中对齐.

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

/* css */
.parent {
  background: #ddd;
  width: 300px;
  height: 300px;
  text-align: center;  /*  让内联子元素水平居中对齐 */
  vertical-align: middle;  /* 对齐方式为 垂直居中 */
  
}
.parent .son {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: red;
  vertical-align: middle; /* 对齐方式为 垂直居中 */
}

.parent::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 1px;
  background: green;
  vertical-align: middle; /* 对齐方式为 垂直居中 */
}

示图

33333.png

方案三 { keyword: absolute | relative }

运用 position: relative | absolute ; 和 transform: translate: (-50%, -50%); 的实现方案.

应用场景一: relative

1. 子元素可以是 内联 或 块级元素
2. 父元素 宽高固定
3. 子元素调用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;  /* 子元素为 块级 和 内联 都可以 */
  width: 50px;
  height: 50px;
  background: red;
  position: relative;  /* 相对定位,子元素默认位置是在左上角 */
  top: 50%;  /* 子元素顶线 对齐 父元素的水平中线 */
  left: 50%; /*  子元素的左侧边线 对齐 父元素的垂直中线 */
  transform: translate(-50% ,-50%); /* 子元素以 参考自身宽高 来计算 变形位移距离  */
}

示图:

44444.png

应用场景二: absolute

1. 子元素可以是 内联 或 块级元素
2. 父元素 宽高固定
3. 子元素调用css3样式: transform

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

/* css */
.parent {
  background: #ddd;
  width: 300px;
  height: 300px;
  position: relative;  /* 父元素设置为 子元素的定位参考,必不可少 */
}
.son {
  display: inline | inline-block | block;  /* 子元素为 块级 和 内联 都可以 */
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;  /* 绝对定位,子元素默认位置是在左上角 */
  top: 50%;  /* 子元素顶线 对齐 父元素的水平中线 */
  left: 50%; /*  子元素的左侧边线 对齐 父元素的垂直中线 */
  transform: translate(-50% ,-50%); /* 子元素以 参考自身宽高 来计算 变形位移距离  */
}

示图:

55555.png

方案四 { keyword: flex }

提要: 运用 flex 布局, 主轴对齐调用 justify-content, 侧轴(交叉轴)对齐 align-items.

应用场景一:

1. 父子元素 块级 内联都可以
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;  /* 元素设置为flex, 此元素的 display:felx */ 
  justify-content: center; /* 水平居中设置 */
  align-items: center;   /* 垂直居中设置 */
}
.box .son {
  width: 100px;
  height: 100px;
  background: blue;
}

图示:

3123123.jpg

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

提要: 文字居中 依据 父元素 text-align, 子元素里　line-height;

应用场景一:

1. 父子元素 块级 内联都可以
2. 水平居中: 父容器text-align: center;
3. 垂直居中: 文字标签 line-height: (number= wrapper.height) px ;

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

/* css */
* {   /*  设置通类,必须 */
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; /* 文字垂直方向居中,参数等于父容器高度值 */
}

图示:

77777.png