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>
效果:
垂直居中不只是只有这几种方法,还有很多的,这里不全部写了
下篇水平垂直居中