web front-end entry to combat: css achieve vertical and centered scene N N ways

inline inline- * or vertical centering element
can make use of padding, line-height, vertical- align attributes. There are two specific scenarios:

1. Single line centered vertically, such as single line of text or link

This case can be realized by adding a vertical centering padding value to the same size as the upper and lower elements.

<div class="container">
    <p>单行文本竖直居中，添加相同的 padding-top & padding-bottom 值</p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 10px;
}

p {
    margin: 0;
    color: #fff;
    /*  相同的上下 padding 值使单行文字居中 */
    padding-top: 100px;
    padding-bottom: 100px;
}
专门建立的学习Q-q-u-n：⑦⑧④-⑦⑧③-零①② ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

If you do not want to use padding padding inconvenient to use, can be provided to the element line-height, the height of the container to be equal to the parent, enabling vertical centering. Note that at this time remember to consider changes in the height of the parent container padding and border brings.

2. Multiple vertical center line, multi-line text

And the same single line of text, adding padding elements to the value of the same size as the vertical, or easy to drop ~

<div class="container">
    <p>
        多行文本竖直居中，给元素上下添加相同的 padding 值。<br />
        这只是另外一段无关紧要的，用来测试的废话。
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding-left: 10px;
    padding-right: 10px;
}

p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /*  给元素上下添加相同大小的padding值 */
    padding-top: 40px;
    padding-bottom: 40px;
}

Another method, by means of an attribute table: the table is set to the parent vessel, vertical centering element required to table-cell, then you can use the vertical-align property is centered.

<div class="container">
    <p>
        多行文本竖直居中，将父容器设置为 table，需要竖直居中的元素设置为 table-cell， 然后使用 vertical-align 属性。
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding-left: 20px;
    padding-right: 20px;
    height: 400px;
    /* 父容器设置成 table*/
    display: table;
}

p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /* 需要竖直居中的元素设置为 table-cell*/
    display: table-cell;
    vertical-align: middle;
}
块级元素竖直居中
通常借助 绝对定位 和 translate 等手段，在已知或者未知块级元素高度时，分别使用不同的方法。

1. 块级元素高度已知

此时可以使用绝对定位的方法，并借助 margin 可以为负值的特性，实现绝对定位居中：

/* 已知元素高度为 100px (也可以是百分比，如 80%)*/
height: 100px;

/* 先使用绝对定位，将元素的上边界置于竖直的中间*/
position: absolute;  
top: 50%;

/* 再使用margin-top，将元素向上移动自身高度的一半*/
margin-top: -50px;  

<div class="container">
    <div class="v-c">
        <p>使用绝对定位使元素竖直居中。</p>
    </div>
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
    /* 父容器需要设置position, 使需要竖直居中的元素相对父容器进行绝对定位*/
    position: relative;
}

.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    height: 200px;
    /* 使用绝对定位使元素竖直居中*/
    position: absolute;
    top: 50%;
    margin-top: -100px; 
    /* 需要考虑 padding 和 border, 如果没有设置 box-sizing: border-box; 的话*/

}

p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}
专门建立的学习Q-q-u-n：⑦⑧④-⑦⑧③-零①② ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

Similar code represents the frequency of use is simply not too high - so use scss under the premise of a mixin an own package, and specifically designed for this targeting.

// 定义绝对定位实现水平、垂直居中
@mixin abs_h_center($width) {
  position: absolute;
  width: $width;
  left: 50%;
  margin-left: -($width/2);
}
@mixin abs_v_center($height) {
  position: absolute;
  height: $height;
  top: 50%;
  margin-top: -($height/2);
}

// 然后使用的时候直接引用就可以了，这样可以避免在改动元素宽或高时，还需要同时去改 margin-left 或者 margin-top 的值
.content {
  @include abs_v_center(200px);
}

2. Block element height is not fixed

Similar principle of the method using the above-mentioned absolute positioning centered, but in the case of highly uncertain element, so the element is moved upward by translateY half their height, so as to realize vertical centering.

/* 先将元素的上边界置于竖直的中间*/
position: relative;  
top: 50%;

/* 再使用 translateY，将元素向上移动自身高度的一半*/
transform: translateY(-50%);  

<div class="container">
    <div class="v-c">
        <p>使用 translateY 使元素竖直居中。</p>
    </div>
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
}

.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    /* 使用 translateY，使元素竖直居中*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}

Currently I think these should be enough to cover most of the usage of ~ these methods to achieve, of course, also be mixed-use, specifically, how, to see scenarios friends.