作为程序员，在写页面的时候，经常会遇到一些水平居中或者垂直居中的布局。今天正好有时间把各种居中方法总结出来分享给大家，希望能给大家带来一些帮助。1、已经知道背景图的宽高，背景图上的文字水平和垂直居中。img-bg{position:absolute;背景：url("http://source.kakehotels.com/kake/frontend/img/flashsales-icon.png")不重复；宽度：90px；高度：90px；背景大小：100%；顶部：0；底部：0；左：0；右：0；保证金：自动；行高：90px；字体大小：12px；颜色：#fff;}2。具有宽度的div水平居中。width-center{width:300px;文本对齐：居中；保证金：0自动；背景：粉红色；}3。具有绝对定位的div是水平的Center.position-center{position:absolute;顶部：0；底部：0；宽度：300px；高度：300px；保证金：自动0；背景：粉色；text-align:center;}4.有绝对定位的divlevel居中vertically.vertical-center-position{position:absolute;宽度：300px；高度：300px；背景：#f5f5f5；文本对齐：居中；顶部：0；底部：0；左：0；右：0；margin:auto;}5.已知宽高的容器的水平方向和垂直方向居中。vertical-center-width{width:300像素;高度：300px；位置：绝对；背景：#f5f5f5；文本对齐：居中；顶部：50%；左：50%；边距顶部：-150px；高容器的水平和垂直方向居中。注意：transform属性不兼容低版本浏览器，如IE8.vertical-center-nowidth{position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}7.水平和垂直居中这个时候记得想到flexbox。无论宽高已知，div都可以在两个方向居中。容器{显示：flex;对齐项目：居中；证明内容：居中；}.containerdiv{颜色：粉色；}8.手机端弹框垂直居中
