更新時間:2021年09月20日16時01分 來源:傳智教育 瀏覽次數(shù):
讓盒子水平垂直居中的方法有哪些?有以下6中方式:
盒子水平垂直居中方案1:利用定位(常用方法,推薦)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子居中方法1</title> <style> .parent { position: relative; width: 500px; height: 500px; border: 1px solid #000; } .child { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; background-color: pink; width: 100px; height: 100px; border: 1px solid #000; } </style> </head> <body> <div class="parent"> <div class="child">子元素</div> </div> </body> </html>
盒子水平垂直居中方案2:利用 margin:auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子居中方案2-黑馬高級web前端培訓(xùn)http://web.itheima.com</title> <style> .parent { position: relative; width: 500px; height: 500px; border: 1px solid #000; } .child { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 100px; height: 100px; border: 1px solid #999; background-color: pink; } </style> </head> <body> <div class="parent"> <div class="child">子元素</div> </div> </body> </html>
盒子水平垂直居中方案3:利用 display:table-cell
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子居中方案3-黑馬高級web前端培訓(xùn)http://web.itheima.com</title> <style> .parent { width: 500px; height: 500px; border: 1px solid #000; display: table-cell; vertical-align: middle; text-align: center; } .child { width: 100px; height: 100px; border: 1px solid #999; background-color: red; display: inline-block; } </style> </head> <body> <div class="parent"> <div class="child">子元素</div> </div> </body> </html>
盒子水平垂直居中方案4:利用display:flex;設(shè)置垂直水平都居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子居中方案4-黑馬高級web前端培訓(xùn)http://web.itheima.com</title> <style> .parent { width: 500px; height: 500px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; } .child { width: 100px; height: 100px; border: 1px solid #999; background-color: red; } </style> </head> <body> <div class="parent"> <div class="child">子元素</div> </div> </body> </html>
盒子水平垂直居中方案5:計(jì)算父盒子與子盒子的空間距離
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子居中方案5-黑馬高級web前端培訓(xùn)http://web.itheima.com</title> <style> .parent { width: 500px; height: 500px; border: 1px solid #000; } .child { width: 100px; height: 100px; border: 1px solid #999; margin-top: 200px; margin-left: 200px; background-color: red; } </style> </head> <body> <div class="parent"> <div class="child">子元素</div> </div> </body> </html>
盒子水平垂直居中方案6:利用transform
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子居中方案6-黑馬高級web前端培訓(xùn)http://web.itheima.com</title> <style> .parent { position: relative; width: 500px; height: 500px; border: 1px solid #000; } .child { position: absolute; width: 100px; height: 100px; border: 1px solid #999; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: red; } </style> </head> <body> <div class="parent"> <div class="child">子元素</div> </div> </body> </html>
猜你喜歡:
北京校區(qū)