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>
效果：
垂直居中不只是只有這幾種方法，還有很多的，這里不全部寫了
下篇水平垂直居中