發(fā)布時(shí)間：2024-01-24閱讀( 28)
馬上又要到秋招的時(shí)候了，又有不少人打算換工作了。前端在面試中總會(huì)被問到的一道基礎(chǔ)題div居中方法，這里給大家總結(jié)一下都有哪些常用的方法。
絕對(duì)定位
還未偏移一半自身寬高
<style> .parent { position: relative; width: 500px; height: 500px; border: solid red 1px; } .demo { position: absolute; width: 100px; height: 100px; border: solid blue 1px; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } </style> <body> <div > <div ></div> </div> </body>
通過flex彈性布局設(shè)置垂直居中和水平居中
<style> .parent { width: 500px; height: 500px; border: solid red 1px; display: flex; // 垂直，水平居中 align-items: center; justify-content: center; } .demo { width: 100px; height: 100px; border: solid blue 1px; } </style> <body> <div > <div ></div> </div> </body>
在子元素不知道自身寬高情況，使用transform進(jìn)行比偏移。
<style> .parent { position: relative; width: 500px; height: 500px; border: solid red 1px; } .demo { position: absolute; border: solid blue 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <body> <div > <div >居中</div> </div> </body>
以上3種是常用的方法，當(dāng)然還有其他居中方法比如grid布局，table-cell布局等。
歡迎分享轉(zhuǎn)載→ http://m.avcorse.com/read-218942.html
Copyright ? 2024 有趣生活 All Rights Reserve吉ICP備19000289號(hào)-5 TXT地圖HTML地圖XML地圖
