垂直居中的多种方式 html中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布局等。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：