水平居中是常用的幾種布局方式之一。主要分為行內元素的居中，塊元素的居中。塊元素的居中還分為固定寬度的居中，不定寬度的居中。行內元素的居中，使用text-align:center就可以實現，已知寬度的塊元素的居中，使用絕對定位以及設置
margin為寬的一半的負值就可以實現。但是不定寬度的居中比起上面兩種更常用，也更復雜，我們常常需要在分頁的頁碼展示等地方用到不定寬居中，使用起來更方便，下面來研究下常用的幾種塊元素的水平居中。

1.標簽嵌套偏移

實現原理：

聯想到固定寬度的居中的實現：先偏移到屏幕中央，在設置其margin方向偏移寬的一半。那么能不能想到一種方法，借用這種思路，先偏移50%到屏幕的右半部分，然后在反方向偏移回來？實現起來比較困難的點是不知道這個寬度是多少。又想到只要讓其父寬度和子寬度相等，然后用百分數就可以解決。那么怎么讓其父寬度和字寬度一樣呢？巧借float具有的包裹性：父元素如果漂浮了，并且沒有設置寬高，那么將盡量包裹子元素。

實現代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表