如何居中一个浮动元素?
首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 div{ 8 width:500px; 9 height:300px; 10 background-color:yellowgreen; 11 margin:-150px 0 0 -250px; 12 position: absolute; 13 left: 50%; 14 top: 50%; 15 } 16 </style> 17 </head> 18 <body> 19 <div>我是浮动的,也是居中的.</div> 20 </body> 21 </html>
效果截图: