前言：
此刻大家对“css正方形div”可能比较关心，咱们都想要剖析一些“css正方形div”的相关资讯。那么小编也在网摘上搜集了一些关于“css正方形div””的相关内容，希望我们能喜欢，姐妹们一起来学习一下吧！马上又要到秋招的时候了，又有不少人打算换工作了。前端在面试中总会被问到的一道基础题div居中方法，这里给大家总结一下都有哪些常用的方法。
绝对定位父级元素（parent）采用相对定位（relative），需要居中的元素（demo）采用绝对定位（absolute）。居中元素向上偏移50%，向左偏移50%，此时左顶点位于中心，不过我们需要的是整体居中，所以在偏移自身一半的宽高。（如下图）
还未偏移一半自身宽高
<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 class="parent"> <div class="demo"></div> </div> </body>弹性方法居中通过flex弹性布局设置垂直居中和水平居中
<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 class="parent"> <div class="demo"></div> </div> </body>使用transform居中在子元素不知道自身宽高情况，使用transform进行比偏移。
<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 class="parent"> <div class="demo">居中</div> </div> </body>以上3种是常用的方法，当然还有其他居中方法比如grid布局，table-cell布局等。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css正方形div
