使用CSS居中浮動元素的方法
2018-08-27 瀏覽:524 作者:admin 類別:網頁設計

方法一

設置容器的浮動方式為絕對定位
然后確定容器的寬高 比如寬500 高 300 的層
然后設置層的外邊距

CSS Code復制內容到剪貼板 div{ width:500px; height:300px; margin:-150px 0 0 -250px; position:absolute; left:50%; top:50%; background-color:#000; }

方法二

父元素和子元素同時左浮動,然后父元素相對左移動50%,再然后子元素相對右移動50%,或者子元素相對左移動-50%也就可以了。

CSS Code復制內容到剪貼板 <!DOCTYPE html><html><head> <title>Demo</title> <meta charset="utf-8"/> <style type="text/css"> .p{ position:relative; left:50%; float:left; } .c{ position:relative; float:left; rightright:50%; } </style></head><body> <div class="p"> <h1 class="c">Test Float Element Center</h1> </div> </body> </html>
點擊這里給我發消息