當提到在web設(shè)計中居中元素時宜咒。關(guān)于被居中的元素和它父元素的信息，你知道的越多就越容易設(shè)置。那么假如當你不知道任何信息束亏？居中也是可設(shè)置的。
不太困難：知道子元素的寬高
如果你知道父元素和要被居中的子元素的寬和高（并且這些尺寸不會改變）阵具，萬無一失的一個居中做法是絕對定位碍遍。
假設(shè)你知道待居中子元素的寬高，但是父元素的寬和高可變阳液。你可以
1）絕對定位待居中的元素
2）設(shè)置top:50%,left:50%
3）設(shè)置margin-top和margin-left為待居中元素高度和寬度的一半怕敬，并取負。（如下圖所示）
以下的這些方法不太全面帘皿，現(xiàn)做補充东跪。
1) ?在待居中元素外 包裹table-cell，設(shè)置table-cell只是讓table-cell中的元素在table-cell中居中。至于table-cell包裹的待居中元素虽填，能否在其原來的父元素中居中要設(shè)置<table style="width:100%; height:100%;">(<table style="width:100%; height:100%;">讓table和table的父元素同寬高丁恭，目的是 ‘設(shè)置text-align:center; vertical-align:middle; ’ 時，讓table的cell能夠居中斋日。)
2）table中在添加tr,td前要先添加tbody牲览。
困難的：不知道子元素的寬高
當你不知道待居中子元素的尺寸時，設(shè)置子元素居中就變得困難了恶守。
最粗俗的方式是像下面這樣使用table元素設(shè)置居中：
如果你擔(dān)心它的語義第献，你可以嘗試將它和你的內(nèi)容做個聯(lián)系。
CSS tables 可能對你來說可以接受熬的，也可能不能接受痊硕。Tables和常規(guī)的塊級div相比確實有一些不同的地方。比如100%width押框，table會根據(jù)table里的內(nèi)容伸展table的寬度岔绸，然而默認情況下塊級元素會伸展它的寬度為父元素的寬度。如果在div你需要定位其它內(nèi)容或這些內(nèi)容的行為不同于table-cell橡伞，那么只有g(shù)od能幫你了盒揉。
當然還有一個非常聰明并且可以實現(xiàn)相同目標的技巧。如果在父元素中設(shè)置ghost元素的高和父元素的高相同兑徘，接著我們設(shè)置ghost元素和待居中的子元素 vertical-align:middle刚盈，那么我們可以得到同樣的效果。
那么這個ghost元素是一個無語意的元素挂脑？不藕漱，它是一個pseudo元素。
我要告訴你的是這個ghost元素技巧是更好的方式并且應(yīng)該是你想要的居中技巧在近些年來崭闲。但是實際上肋联，它和table技巧是一樣的。該技巧幾乎在所有瀏覽器中都支持刁俭，包括IE 8+橄仍。IE 7不支持psedo元素。但是IE 7同樣不支持CSS tables牍戚，所以IE 7是公平的侮繁。如果需要支持IE 7以下，就是時候用<table>了（或使用同樣無語意的<span>）
注意：那個0.25em回退有點難侍弄如孝。最好的做法是在父元素中設(shè)置font-size:0 并在子元素中設(shè)置一個合理的font-size宪哩。
本文翻譯自：https://css-tricks.com/centering-in-the-unknown/
轉(zhuǎn)載請注明出處。
