div水平垂直居中方法汇总(共六种)

技术2022-07-10 131

文章目录

第一种第二种第三种第四种第五种第六种

第一种

绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中方式1</title> <style> /*使用绝对定位，不确定子div的宽高，父元素需要添加position:relative*/ .father { background: red; position: relative; width: 500px; height: 500px; } .son { background: green; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div class="father"> <div class="son">hello simon</div> </div> </body> </html>

第二种

绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中方式2</title> <style> /*使用绝对定位，确定了子div的宽高，margin值为子div宽高的一半的负值*/ .father { background: red; position: relative; width: 500px; height: 500px; } .son { width: 200px; height: 200px; background: green; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; } </style> </head> <body> <div class="father"> <div class="son">hello simon</div> </div> </body> </html>

第三种

绝对定位方法：绝对定位下top left right bottom 都设置0 ，margin设置为auto

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中方式3</title> <style> /*使用绝对定位，确定了子div的宽高，left、right、top、bottom都设置为0，margin设置为auto*/ .father { background: red; position: relative; width: 500px; height: 500px; } .son { width: 200px; height: 200px; background: green; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; } </style> </head> <body> <div class="father"> <div class="son">hello simon</div> </div> </body> </html>

第四种

flex布局方法：当前div的父级添加flex css样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中方式4</title> <style> /*使用flex布局，为父div添加flex布局样式align-items和justify-content*/ .father { background: red; position: relative; width: 500px; height: 500px; -webkit-display: flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .son { width: 200px; height: 200px; background: green; } </style> </head> <body> <div class="father"> <div class="son">hello simon</div> </div> </body> </html>

第五种

table-cell实现水平垂直居中: table-cell middle center组合使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中方式5</title> <style> /*table-cell、vertical-align、text-align组合使用*/ /*子div只能不能是块状元素，否则只能垂直居中，无法水平居中*/ .father { width: 500px; height: 500px; display: table-cell; vertical-align: middle; text-align: center; background-color: red; } .son { width: 200px; height: 200px; background-color: green; display: inline-block; } </style> </head> <body> <div class="father"> <div class="son">hello simon</div> </div> </body> </html>

第六种

绝对定位：calc() 函数动态计算实现水平垂直居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中方式6</title> <style> .father { position: relative; border: 1px solid #f40; background-color: #f30; width: 80vw; height: 80vh; } .son { position: absolute; width: 30vw; height: 30vh; background-color: #ff0; left: -moz-calc((80vw - 30vw)/2); top: -moz-calc((80vh - 30vh)/2); left: -webkit-calc((80vw - 30vw)/2); top: -webkit-calc((80vh - 30vh)/2); left: calc((80vw - 30vw)/2); top: calc((80vh - 30vh)/2); } </style> </head> <body>  <div class="father"> <div class="son"> hello simon </div> </div> </body> </html>

Processed: 0.017, SQL: 9