CSS实现DIV垂直水平居中
在页面设计中,很多地方都需要div的垂直水平居中,在前端开篇的学习中,也是使用较多的地方,所以我整理了三种方法帮助大家去解决问题,代码可直接使用,仅供参考学习。
方法
方法一:
<style>div {width: 100px;height: 100px;background-color: pink;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style></head><body><div></div></body>
方法二:
<style>div {width: 100px;height: 100px;background-color: pink;position: absolute;top: 50%;left: 50%;margin-top: -50px; /*height的一半*/margin-left: -50px; /*width的一半*/}</style></head><body><div></div></body>
方法三:
<style>div {width: 100px;height: 100px;background-color: pink;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style></head><body><div></div></body>
效果图:
总结
这些都是前端学习的基础内容,希望大家活学活用,在前端的学习中不断进步。
如果文章对你有帮助的话,请给我一个小小的点赞一波哦!每个赞和评论都是我编写文章的动力哦!