在我们实际项目中，有很多关于垂直居中的方法，比如，在手机页面中有很多的弹框提示内容，简单整理如下，希望可以帮助到大家。
做了很多的页面，感觉垂直居中这个问题一直存在，感觉有的方法比较简单，有的却需要根据实际情况去算，我整理的是我在实际中使用过的方法，可能不是最全面的，但实操效果还是不错的哟。
废话少说直接上代码咯：
/* 常用的三种方法 */ /* 第一种 */ 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控制滚动条样式的解析
css3自定义滚动条样式的示例详解
css设置div滚动条样式的示例
以上就是css实现元素水平、垂直居中的详细内容。