標籤：margin .so css 標籤 尋找 word table ie6 位置
行內元素：
水平置中：text-align:centerul水平置中:加display:table;margin:0 auto;此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有分行符號。垂直置中：line-height:父元素的height塊元素：
水平置中：①margin:0 auto
例：.father{ width:200px; height:200px; background-color:red; }.son{ width:100px; height:100px; background-color:black; margin:0 auto; }0指上下外邊距為0，auto指左右外邊距自適應，此時水平置中。（該方法不適用於垂直置中） 這種方法不適用於通屏，即若子項目溢出，則在父元素中不置中
②position:relative/absolute/fixed
relative:相對定位，保留初始位置（即不浮動）
特點：1.不影響元素本身特性 2.不使元素脫離文檔流（不浮動） 3.可以不設定位移量，此時位置不會發生變化 4.該元素是相對於自己本身位置的位移量。absolute:絕對位置，不保留初始位置
特點：1.元素完全脫離文檔流（浮動） 2.使內嵌元素支援寬和高 3.讓塊標籤內容撐開寬高 4.相對父元素位移，且逐層尋找，直到document，若父元素沒有position:relative屬性，則繼續向上找，直到document,即相對於瀏覽器左上方。 5.提升層級，即蓋在其他未用該屬性的元素上，或者在他之前使用該屬性的元素上。（優先順序可以用z-index設定，值越大，優先順序越高，但是若父元素，即使用position:relative的元素也被覆蓋，則沒有用）fixed:相對於視窗定位，即不管滑輪向下還是向上拉，該元素位置始終不變。（IE6以下不相容）
<style>.test{width:200px;height:100px;background-color:yellow;}.test1{width:200px;height:100px;background-color:green;position:relative;left:50%;margin-left:-100px; <!--子項目的height的一半-->}.test2{width:200px;height:100px;background-color:blue;}.test3{width:200px;height:100px;background-color:red;}</style></head><body><div class="test"></div><div class="test1"></div><div class="test2"></div><div class="test3"></div>(插不了圖片。。。我口述吧。。) 就是保留了圖片本來的的位置，而圖片移動到了螢幕中央的位置。 若將上面test2的position改為absolute，則浮動，圖片2本來的位置被test3覆蓋 用上面position，left，margin-left三個屬性也可以使div水平置中（垂直置中將left改為top即可） 這種方法適用於通屏，即若子項目溢出，則在父元素中也置中。
優點：不用知道父元素的width
垂直置中：
①設定父元素的padding
缺點：需要知道父元素的width值
②上述水平方法第二個，將left改為top
③絕對置中（即水平，垂直都置中）
實現方法：父元素相對定位，子項目絕對位置，在子項目中添加屬性
{ margin:auto; top:0; left:0; bottom:0; right:0;}該方法不浮動，但也存在不通屏的問題。
div和css：行內元素和塊元素的水平和垂直置中
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
