1、position实现居中显示:
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%);
}
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写法