方法一：已知元素宽高
div { background: #6699ff; width: 100px; height: 100px; /* 如果有父元素，父元素需要相对定位 */ position: absolute; top: 50%; left: 50%; /* 相对于父元素二分之一的高和宽 （自适应最好用百分比表示单位）*/ margin: -50%, 0, 0, -50%; /* 里面文字垂直居中 */ text-align: center; line-height: 100px; }方法二：未知元素的高宽
div { width: 200px; height: 200px; background: #6699ff; margin: auto; /* 父元素需要相对定位 */ position: absolute; left: 0; top: 0; bottom: 0; right: 0; }在div中垂直居中一个img图片
div { width: 500px; height: 500px; border: 1px solid red; position: relative; } img { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; }