1、position实现居中显示：
image.png
HTML：
<body>
<div class="wraper center">
<div class="inside center"></div>
</div>
</body>
CSS：
html,
body {
width: 100%;
height: 100%;
position: relative;
}
.wraper {
width: 80%;
height: 80%;
background-color: #ddd;
}
.inside {
width: 30%;
height: 30%;
background-color: blue;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
image.png
position：relative；
position：absolute；
a.div>b.div:a设置成position:relative;相当于浏览器的相对定位。b设置成position:absolute;top:50%,left:50%,transform:translate(-50%,-50%);相对于a的div的绝对的定位。
2、flex布局也可以实现居中：
对外层容器设置成如下样式：
display: flex;
justify-content: center;
align-items: center;
3、table-cell：
外层容器
display:table-cell;
text-align:center;
vertical-align:middle;
内部元素
vertical-align:middle;
display:inline-block;
另外补充不同浏览器的css样式的写法：
-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法
