div水平垂直居中方法一：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#test{position: absolute;width: 100px;height: 100px;background: pink;left: 0;right: 0;bottom: 0;top: 0;margin: auto;}</style></head><body><div id="test"></div></body></html>div水平垂直居中方法二：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#test{position: absolute;width: 100px;height: 100px;background: pink;left: 50%;top: 50%;/*margin-left和margin-top的值为宽度和高度的一半*/margin-left: -50px;margin-top: -50px;}</style></head><body><div id="test"></div></body></html>img水平垂直居中方法：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">html,body{height: 100%;}body{text-align: center;}body:after{content: "";display: inline-block;height: 100%;vertical-align:middle;}img{vertical-align: middle;}</style></head><body><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537119514734&di=5f0585bf2c64ae73b202f2cf98751cd5&imgtype=0&src=http%3A%2F%2Ftgi13.jia.com%2F116%2F258%2F16258758.jpg"/></body></html>CSS：div/img水平垂直居中
原文地址：https://www.cnblogs.com/xinzaimengzai/p/9657965.html