CSS中有哪些方法可以实现垂直居中？

CSS中有哪些方法可以实现垂直居中？

几种常用到的垂直居中方法：
行内元素;
单行 - 行内元素
1.一般用line-height来实现垂直居中,用text-ailgn实现水平居中
多行 - 行内元素
1.用表格的vertical-align来实现垂直居中
2.用flex弹性布局
块级元素
1.通过padding实现垂直居中
2.flex布局实现垂直居中
3.相对定位,绝对定位实现垂直居中

问题：
使用一个div包裹一个img， 发现图片与div之间有间隙
原因:
来是因为在H5文档声明下，块状元素内部的内联元素的行为表现所致，简单地说就好像块状元素内部有个看不见的没有宽度的空白节点。
而不设置vertical-align属性，vertical-align默认是baseline。
解决方法;
1.在图片的类中,vertical-align:bottom;//top和bottom都可以
2.由于baseline是设置行内元素(inline)或者表格单元素(table-cell)的垂直对齐方式，
所以可以将img转换成块级元素,display：block，
3.把父元素的font-size设为0
编码实战：
行内元素;
单行 - 行内元素
用line-height来实现垂直居中,用text-ailgn实现水平居中
.box{
/height: 200px;/
width: 200px;
border:2px solid;
/text-align属性指定元素文本的水平对齐方式/
margin:100px;
}
.box-inline{
display: inline;
/text-align:center;/
line-height: 200px;
margin:0 auto;
}

行内单行文本居中

多行 - 行内元素

1.用表格的vertical-align来实现垂直居中
style type=“text/css”>
.father {
display: table;
width: 200px;
height: 200px;
border: 2px solid;
text-align: center;
}
.son {
display: table-cell;
vertical-align: middle;
}

2.用flex弹性布局

块级元素
1.通过padding实现垂直居中
.aa{
display: inline;
background: blue;
color:red;
padding-top: 100px;
padding-bottom:100px;
padding-left: 100px;
padding-right:100px;
}
.bb{
display: block;
background: yellow;
color:red;
padding: 100px;
margin:100px;
}
.cc{
display: block;
background: black;
color:red;
padding: 100px 100px;
}

块级元素,背景蓝色,内容文字红色,设置padding:100px实现垂直居中

块级元素,背景蓝色,内容文字红色,设置padding:100px实现垂直居中

2.flex布局

flex.html
(父元素有固定的宽高,自适应子元素居中)
.father {
display: flex;
justify-content: center;
/主轴居中/
align-items: center;
/交叉轴居中/
width: 400px;
height: 300px;
border: 2px solid;
margin: auto;
}
.son {
width: 200px;
height: 200px;
background: red;
}
3.相对定位,绝对定位
1.知道父元素和资元素的宽高
.father-1{
width: 400px;
height: 300px;
position: relative;
border: 2px solid;
margin:auto;
}
.son-1{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
width: 200px;
height: 200px;
background: red;
}
2.知道父元素宽高,元素宽高未知(即子元素不设具体宽高由内容撑开)
.father-2 {
width: 400px;
height: 300px;
position: relative;
border: 2px solid;
margin: auto;
}
.son-2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid;
}
显示内容为子元素撑开,用文本感受更加直观,自适应水平垂直居中,最大宽度为父元素的一半
(6）拓展思考：
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种
在实际应用中,分门别类,对号入座,并且和可以通过
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
相互转换灵活运用
(7）参考文献
1.css垂直居中:https://blog.csdn.net/weixin_33969116/article/details/89390500
2.行内元素margin:auto为何失效: https://www.hongkiat.com/blog/css-margin-auto/