当提到在web设计中居中元素时。关于被居中的元素和它父元素的信息，你知道的越多就越容易设置。那么假如当你不知道任何信息？居中也是可设置的。
不太困难：知道子元素的宽高
如果你知道父元素和要被居中的子元素的宽和高（并且这些尺寸不会改变），万无一失的一个居中做法是绝对定位。
假设你知道待居中子元素的宽高，但是父元素的宽和高可变。你可以
1）绝对定位待居中的元素
2）设置top:50%,left:50%
3）设置margin-top和margin-left为待居中元素高度和宽度的一半，并取负。（如下图所示）
以下的这些方法不太全面，现做补充。
1) 在待居中元素外 包裹table-cell，设置table-cell只是让table-cell中的元素在table-cell中居中。至于table-cell包裹的待居中元素，能否在其原来的父元素中居中要设置<table style="width:100%; height:100%;">(<table style="width:100%; height:100%;">让table和table的父元素同宽高，目的是 ‘设置text-align:center; vertical-align:middle; ’ 时，让table的cell能够居中。)
2）table中在添加tr,td前要先添加tbody。
困难的：不知道子元素的宽高
当你不知道待居中子元素的尺寸时，设置子元素居中就变得困难了。
最粗俗的方式是像下面这样使用table元素设置居中：
如果你担心它的语义，你可以尝试将它和你的内容做个联系。
CSS tables 可能对你来说可以接受，也可能不能接受。Tables和常规的块级div相比确实有一些不同的地方。比如100%width，table会根据table里的内容伸展table的宽度，然而默认情况下块级元素会伸展它的宽度为父元素的宽度。如果在div你需要定位其它内容或这些内容的行为不同于table-cell，那么只有god能帮你了。
当然还有一个非常聪明并且可以实现相同目标的技巧。如果在父元素中设置ghost元素的高和父元素的高相同，接着我们设置ghost元素和待居中的子元素 vertical-align:middle，那么我们可以得到同样的效果。
那么这个ghost元素是一个无语意的元素？不，它是一个pseudo元素。
我要告诉你的是这个ghost元素技巧是更好的方式并且应该是你想要的居中技巧在近些年来。但是实际上，它和table技巧是一样的。该技巧几乎在所有浏览器中都支持，包括IE 8+。IE 7不支持psedo元素。但是IE 7同样不支持CSS tables，所以IE 7是公平的。如果需要支持IE 7以下，就是时候用<table>了（或使用同样无语意的<span>）
注意：那个0.25em回退有点难侍弄。最好的做法是在父元素中设置font-size:0 并在子元素中设置一个合理的font-size。
本文翻译自：https://css-tricks.com/centering-in-the-unknown/
转载请注明出处。
网友评论