2019-11-02 20:18:35
一丶什么是垂直居中
指当前标签在父级容器中垂直方向是居中显示的
实现垂直居中的几种方式：
1.table-cell+vertical-align 属性配合使用
2.absolute+transform 属性配合使用
3.display+align-items 属性配个使用
4.position+margin 属性配合使用
二丶代码
1.第一种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent{ height: 600px; width: 200px; display: table-cell; vertical-align: middle; background: chocolate; } .child{ width: 200px; height: 200px; background: darkblue; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
效果：
vertical-align:属性时用来设置文本内容垂直方向的对齐方式
这里常用属性值：top 顶部对齐
middle 居中对齐
bottom 底部对齐
这里为什么会对div有效果，就完全是因为display属性的table-cell属性值，这时父级标签将会表示成为一个表格的单元格，在table中单元格是可以将内容垂直居中的，因为单元格有两种对齐方式，一种是水平方向的，一种是垂直方向的。
这种方式的优点与缺点
优点：浏览器兼容性好，支持老版本的浏览器，这两个属性在CSS2中也是支持的而老版本的浏览器对CSS2的支持非常好
缺点：vertical-align属性具有继承性，这将会导致父级标签内的所有文本都是垂直居中的
2.第二种方式
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent{ background: cornflowerblue; height: 600px; width: 200px; position:relative; } .child{ width: 200px; height: 200px; position:absolute; top:50%; transform:translateY(-50%); background: crimson; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
效果：
这里的定位并没有多于，这里是让子级标签在父级标签居中的，父级标签不开启定位将会以页面进行定位，如果开启了将会以父级标签进行定位，所以这里需要开启父级标签的定位。
这种方式的优缺点
优点：父级标签不管是否脱离文档流，不会影响子级标签垂直居中的效果
缺点：transform属性是CSS3中的新属性，浏览器支持不好，在个别老版本的浏览器中不适用
3.第三种
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent{ background: darkcyan; height: 600px; width: 200px; display: flex; align-items: center; } .child{ background: darkred; width: 200px; height: 200px; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
效果：
这里布局使用的flex布局（弹性布局）任何一个容器都可以指定为flex布局，在flex布局中它的子级标签都将会成为flex item，这个好像有点老了
4.第四种
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent{ background: cornflowerblue; width: 200px; height: 600px; position: relative; } .child{ background: crimson; position: absolute; top: 0; bottom: 0; margin: auto; width: 200px; height: 200px; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
效果：
垂直居中不只是只有这几种方法，还有很多的，这里不全部写了
下篇水平垂直居中