浮動元素水平居中:
1.如果浮動元素定寬，可以設置margin:0 auto居中
2.如果浮動元素不定寬，在外層包裹一個div .wrap {position:relative;//為了讓元素可以偏移float:left;//讓元素具有寬度，利用BFC元素特性 left:50%;} .content{position:relative;float:left;right:50%;},由於.wrap也浮動，為了不影響其他元素，需要清除浮動
<div class="wrap"> <div class="content">123</div> </div>
.content { width: 100px; height: 100px; background-color: #e92322; float: left; position: relative; left: -50%;
} .wrap { float: left; position: relative; left: 50%; }
浮動元素垂直居中：
核心代碼: vertical-align: display:
<style type="text/css"> #demo { width: 300px; height: 200px; background-color: grey; display: table-cell; vertical-align: middle; } .fl { float: left; width: 50px; height: 50px; background-color: black; } </style>
<body> <div id="demo"> <div class="fl"></div> </div> </body>
絕對定位元素水平垂直居中:
left：50%，然后往左走自己盒子的一半(margin-left)
top:50%,然后往上走自己盒子的一半(margin-top)