方法1(margin: 0 auto)
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css浮动盒子居中</title> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????????list-style: none; ???????} ???????body{ ???????????background: #fffccc; ???????????text-align: center; ???????} ???????.box{ ???????????background-color: red; ???????????display: inline-block; ???????} ???</style></head><body><div class="box"> ???我是浮动的盒子 我要居中</div></body></html>
方法2(inline_block)
body{ ???????????background: #fffccc; ????} .box{ ???????????background-color: red; ???????????width: 30%; ???????????margin: 0 auto; ?????}方法三（flew）
body { ???????????background: #fffccc; ???????????display: flex; ???????????justify-content: center; ???????????height: 300px; ???????} ???????.box { ???????????background-color: red; ???????????width: 30%; ???????????margin: 0 auto; ???????}
盒子要有高度不然其高度与父级一致方法四 （浮动或者定位)
body { ???????????background: #fffccc; ???????????height: 300px; ???????} ??.box { ???????????background-color: red; ???????????width: 30%; ???????????float: left; ???????????margin-left: ?50%; ???????????transform: translateX(-50%); ????}）
css盒子居中
原文地址：http://www.cnblogs.com/aqigogogo/p/8028093.html