各种居中问题总结

水平居中

1.宽度确定的块状元素水平居中:

margin:0 auto;

2.不定宽块状元素水平居中:

设置父元素为:
position:relative;
float:left;
left:50%;

设置子元素(想要居中的元素)为:
position:relative;
left:-50%;
这种方法只适合父元素宽度不确定的情况.

3.行内文本(包括多行和单行文本)或者图片水平居中:

设置父元素为:
text-align:center;

不过也可以通过将块级元素转化为inline-block来实现居中:

.sup{
    text-align:center;
}
.sub{
    display:inline-block
}
<div class='sup'>
    <div class='sub'>
    </div>
</div>

4.通过position实现水平居中:

父元素：
{position:relative;}
子元素宽度确定：
{position:absolute;
left:50%;
margin-left:-(width/2);//(向左偏移元素宽度的二分之一)


5.通过position和transform实现水平居中,子父元素均不需要确定宽度

父元素:
{position:relative;}

子元素:

position: absolute;
left: 50%;
transform: translateX(-50%);

这种方法兼容性不好.

垂直居中（父元素高度确定）

1.单行文本垂直居中

设置hight与line-hight相等.

2.多行文本垂直居中:给父元素设置:

display:table-cell;
vertical-align:middle;

水平垂直居中

今天无意中又发现一种居中方式，可以让不知道宽高的图片元素水平垂直居中，但是块状元素还是要知道宽高,代码如下:

position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

今天又补充一种水平垂直居中:
设置父元素为:

display:table-cell;
vertical-align:middle;
text-align:center;

设置子元素为:

display:inline-block;