这里网络了八种不同的方法。
一、行高，line-height。适用场景：单行笔墨垂直居中。
在一个块级元素中有一行字，想让笔墨垂直居中，便可以在块级元素上设置和元素高度同等的行高。如图所示<div>元素，添加行高后，笔墨的位置就从左边变成右边的，实现了垂直居中。
html
<div id="div"> 你好</div>
css
#div{ height:50px; line-height:50px; }
适用场景：图片垂直居中。
<div id="div"> <img src="image.png" id="img" /></div>
给父元素添加line-height,给图片元素加上vertical-align: middle。
#div { line-height: 200px;}#img { vertical-align: middle;}
适用场景：居中元素能被撑开有高度即可利用。
html
<div id="div"> <div id="block">content</div></div>
css
#div { position:relative;}#block { positopn:absolute; top:50%; transform: translateY(-50%)}四、表格法。
适用场景：多行笔墨垂直居中，或者将块元素转成行内元素也可利用。
vertical-align 只对 table-cell 以及 inline-element 起浸染，vertical-align 的值是相对付其父元素的，父元素必须是行内元素。如果想用于块元素，我们可以将父元素转化为table，这样就能利用此方法。
多行笔墨居中
// html<div id="div"> <span id="content">那是由于你没有用对方法，每种垂直居中，都有不同的利用条件。下面我们来详细理解一下吧。</span></div>// css#div{ display: table;}#span { display: table-cell; vertical-align: middle;}
块元素居中
#div { display: table;}#block { display: table-cell; vertical-align: middle;}五、绝对定位+负边距法。
适用场景：这种方法适用于块级元素，须要设置元素的高度。也便是设置子元素间隔父元素顶部50%，然后通过margin把子元素向上移动自身高度的一半。
html
<div id="div"> <div id="block">content</div></div>
css
#div { position:relative;}#block { positopn:absolute; top: 50%; left: 50%; height: 30%; width: 40%; margin: -15% 0 0 -20%;}六、弹性盒子法。
适用场景：都可以利用。
html
<div id="div"> <div id="block">content</div></div>
css有两种写法：
// 方法一：#div { display:flex; align-item:column; }// 方法二：#div { display:flex; flex-direction:column; // 改变主轴方向 justify-content:center; // 定义主轴的对齐办法}七、绝对定位+margin:auto
适用场景：块级元素垂直居中。
把要垂直居中的元素相对付父元素绝对定位，top和bottom设置为相等的值，我这里设置成0了。再将要居中的元素的margin设为auto，这样就可以实现垂直居中了。
html
<div id="div"> <div id="block">content</div></div>
css
#div { position:relative;}#block { positopn:absolute; top:0; bottom:0; margin:auto 0;}
适用场景：须知父元素的高度和子元素的高度。如果指定父元素高度为300px，子元素高度为100px，要实现垂直居中须要设置父元素的高下padding为100px。
html
<div id="div"> <div id="block">content</div></div>
css
#div { padding: 100px 0;}
喜好的话，欢迎点赞收藏！
