最近做demo時，經常需要div垂直居中或者讓div內文字相對div垂直居中。水平居中比較簡單，就不多說了，這里主要記錄一下垂直居中的一些方法。
一、div垂直居中的一些方法：
1.當height、width固定大小時，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; } .div1{ width: 300px; height: 300px; background: red; margin: 0 auto; /*水平居中*/ position: relative; top: 50%; /*偏移*/ margin-top: -150px; } </style> </head> <body> <div class="div1"></div> </body> </html>
運行結果：
2.當height、width大小是百分比時，有如下三種方法可以實現：
法一：使用CSS3的transform屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; } .div1{ height: 30%; width: 30%; background: green; position: relative; top: 50%; transform: translateY(-50%);/* 元素往下位移自身高度50%的距離 */ } </style> </head> <body> <div class="div1"></div> </body> </html>
運行效果：
法二：使用CSS3的彈性布局（flex）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; } .div1{ height: 100%; width: 100%; display: flex;/*設置為彈性容器*/ align-items: center; /*定義div1的元素垂直居中*/ justify-content: center; /*定義div1的里的元素水平居中*/ background: green; } .div2{ width: 50%; height: 50%; background: red; } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> </body> </html>
運行效果：
法三：絕對定位時的一種巧妙方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; } .div1{ height: 50%; width: 50%; background: red; position:absolute; /*這里必須是absolute絕對定位*/ left: 0; right: 0; top: 0; bottom: 0; margin:auto; } </style> </head> <body> <div class="div1"></div> </body> </html>
運行效果：
二、div內文字相對div垂直居中的一些方法：
1.當height、width固定大小時，有如下兩種方法可以實現：
法一：只要保證line-height和height相同，即可保證div內的文字垂直居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字垂直居中</title> <style> html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; } .div1{ height: 100px; line-height: 100px; width: 100px; background: red; } </style> </head> <body> <div class="div1">我的文字1</div> </body> </html>
運行效果：
法二：利用table-cell實現
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; } .div1{ /*這里的寬和高必須固定*/ height: 500px; width: 500px; display:table-cell; vertical-align: middle; background: green; } </style> </head> <body> <div class="div1">文字垂直居中</div> </body> </html>
運行效果：
2.當height、width是百分比大小時，上面的方法就不適用了，用如下方法：
法一：借鑒了CSS3的彈性布局（flex）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; } .div1{ /*這里的寬和高必須固定*/ height: 50%; width: 50%; background: red; display: flex;/*設置為彈性容器*/ align-items: center; /*定義div1的元素垂直居中*/ justify-content: center; /*定義div1的里的元素水平居中*/ } .div2{ background: green; } </style> </head> <body> <div class="div1"> <div class="div2">文字垂直居中</div> </div> </body> </html>
運行效果：
----------------------------------分割線--------------------------------
以上就是我目前知道的一些方法，如果后期還有新的方法，我會及時更新，方便自己，也方便他人。