水平居中
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;