在我们实际项目中，有很多关于垂直居中的方法，比如，在手机页面中有很多的弹框提示内容，简单整理如下，希望可以帮助到大家。
做了很多的页面，感觉垂直居中这个问题一直存在，感觉有的方法比较简单，有的却需要根据实际情况去算，我整理的是我在实际中使用过的方法，可能不是最全面的，但实操效果还是不错的哟。
废话少说直接上代码咯：
/* 常用的三种方法 */
/* 第一种 */
div{
width: 200px;
height: 200px;
margin: auto;
background: pink;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 第二种 */
div{
width: 200px;
height: 200px;
background: green;
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
/* 第三种 */
div{
width: 200px;
height: 200px;
background: green;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}html部分直接去实现去套吧
相关推荐：
立即学习“前端免费学习笔记（深入）”；
以上就是css实现元素水平、垂直居中的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
632
收藏
