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>
效果图：
总结
这些都是前端学习的基础内容，希望大家活学活用，在前端的学习中不断进步。
如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！
