一、如果父级元素的宽高和子级元素的宽高都固定，可以直接用元素定位（relative、absolute）的方法让子级元素处于父级元素中央。
二、如果父级元素的宽高不定，而子级元素的宽高固定，则可以采用css3的新增属性calc来使子级元素水平、垂直方向处于父级中央。calc可以给元素的width、height、margin等设置动态值。
clac语法：calc() = calc(四则运算)
说明： 用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-“, “*”, “/” 运算； calc()函数使用标准的数学运算优先级规则；
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>clac</title> <style> html,body{ width: 100%; height: 100%; margin: 0; } #div{ width: 200px; height: 200px; background: red; position: absolute; left: -webkit-calc(50% - 100px); top: -webkit-calc(50% - 100px); } </style> </head> <body> <div id="div"></div> </body> </html>效果：
三、如果父级元素和子级元素的宽高都不定，则可以采用flex布局来使子级元素在父级元素中水平垂直居中显示。
flex布局详细讲解转到此处
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex布局</title> <style> html,body{ width: 100%; height: 100%; margin: 0; } body{ display: flex; justify-content: center; align-items: center; } #div{ background: red; } </style> </head> <body> <div id="div"> <h1> flex布局 </h1> </div> </body> </html>效果：
注：以上所讲实际写的时候请注意加上浏览器前缀。
