在實際工作中，經常會遇到容器居中問題，而CSS容器水平和垂直居中的方法，網絡上已經有很多相關文章，在這裡，我也對工作中用到的一些居中方法進行了總結，并加入了一些自己的觀點，如有錯誤歡迎指正。
假設有如下html和樣式，我們需要将inner容器居中：
效果如下：
此外，這種寫法的:
margin-left和margin-top也可以換成transform:translate(-100px,-100px)。
注：這裡的inner是必須要有寬高
二、絕對定位2：首先讓outer相對定位relative，其次讓inner絕對定位absolute，四個方向的距離都為0，再加上margin:auto即可：
效果如下：
注：這裡的inner是必須要有寬高的，因為四個方向都為0，一旦不寫寬度，inner就會“觸及底線”。
三、模拟單元格table-cell：因為表格單元格的vertical-align:middle，可以輕松讓裡面的内容垂直居中，這個方法就是利用這個特性來實現垂直居中的：
注：1、outer由于變成了表格，不再像普通的塊容器寬度默認一整行，所以要加上寬度。
2、這個方法既适用于固定高度的容器，也适用于不固定高度的容器。
四、CSS3的flex：outer要變成flex容器，并且垂直居中用align-items: center，水平居中用：justify-content: center
注：此方法非常好用，當然不考慮兼容性。而且，inner無論是否有寬高都适用。
五、CSS3的flex配合margin：此方法可以被視為上面的升級版，outer要變成flex容器，inner邊距自動即可
注：此方法非常好用，當然不考慮兼容性。而且，inner無論是否有寬高都适用。
好東西就要總結起來，好東西就要收藏起來，随着浏覽器兼容性越來越好，上面的很多方法已經可以放心使用了。當然，如果各位有更好的方法，歡迎在下方評論留言哦！
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
