margin為寬的一半的負值就可以實現。但是不定寬度的置中比起上面兩種更常用，也更複雜，我們常常需要在分頁的頁碼展示等地方用到不定寬置中，使用起來更方便，下面來研究下常用的幾種塊元素的水平置中。
1.標籤嵌套位移
實現原理：
聯想到固定寬度的置中的實現：先位移到螢幕中央，在設定其margin方向位移寬的一半。那麼能不能想到一種方法，借用這種思路，先位移50%到螢幕的右半部分，然後在反方向位移回來？實現起來比較困難的點是不知道這個寬度是多少。又想到只要讓其父寬度和子寬度相等，然後用百分數就可以解決。那麼怎麼讓其父寬度和字寬度一樣呢？巧借float具有的包裹性：父元素如果漂浮了，並且沒有設定寬高，那麼將盡量包裹子項目。
實現代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>不定寬度水平置中</title> <style> body{ background-color: #e5da31; } .container{ position: absolute; /*脫離文檔流，其寬度將由子項目的寬度決定*/ left:50%; } .content{ position: absolute; left:-50%; background-color: #2ecc71; } </style></head><body><p class="container"> <p class="content">標籤嵌套</p></p></body></html>
實現效果：
優點與缺點：
缺點很明顯，需要自己寫和文檔內容無關的標籤，多打了那麼幾行代碼相容性良好，在ie6+瀏覽器上查看沒有問題
2.flex-box布局
實現原理：
先定義一個flex容器，然後設定其內容對齊為中間對齊
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>不定寬度水平置中</title> <style> body { background-color: #e5da31; } .container { display: flex; /*定義一個flex容器*/ justify-content: center; /*定義容器的空間沒有被全部佔用時，內容的對其方式*/ } .content{ background-color: #2ecc71; } </style></head><body><p class="container"> <p class="content">標籤嵌套</p></p></body></html>
實現效果：
優缺點分析：
實現起來最簡單，但是呢，因為flex的相容性不好，當要相容低階瀏覽器時謹慎使用。
3.內聯布局
實現原理：
text-align:center可以讓行內元素水平置中，如果改變塊元素為行內元素，在使用text-align就可以實現水平置中。
實現代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>不定寬度水平置中</title> <style> body{ background-color: #e5da31; } .container{ text-align:center; } .content{ display: inline; background-color: #2ecc71; } </style></head><body><p class="container"> <p class="content">標籤嵌套</p></p></body></html>
實現效果：
優缺點分析：
用本來是修飾文字對齊的text-align來實現水平置中總感覺有點彆扭，這塊外面的container也先多餘，但是為了不影響body內其他元素的局部，暫且如此。另外相容性不錯，在ie6+可以正常顯示。
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
