如何居中一个元素?

居中有2种居中! 水平居中和垂直居中,分类一下!

一、水平居中

1.行级元素:可以在父元素设置 text-align:center。

另外,行级元素不能设置margin-top/bottom但是可以设置margin-left/right。当然也可以通过text-indent来改变行级元素在水平方向的缩进但是最好还是用 text-align:center。

2.块级元素:有很多种情况。

(1)没有浮动,没有定位:margin: 0  auto

(2)有浮动,没有定位:有浮动就会脱离文档流,所以margin:0 auto就不行了,给父级也加浮动?

测试:给父级加浮动后,再给浮动子级加margin:0 auto ,子级能居中吗?

  如何居中一个元素?_第1张图片

结果如下:

如何居中一个元素?_第2张图片

显而易见是无用的,这时我们应该怎么居中这个元素呢?

很简单,我们在子级元素外层再包裹一层div即可,然后再设置div:margin :0 auto,注意div的宽度。

如何居中一个元素?_第3张图片 

结果如下:

如何居中一个元素?_第4张图片

成功居中了,如果有多个浮动元素想居中,我们可以把它们都放在div包裹起来,注意div的宽度要等于每个元素的宽度之和!

如下:

如何居中一个元素?_第5张图片

(3)相对定位,有无浮动均可:position:relative;left:50%;margin-left:- width/2(负边距法)

(4)绝对定位,有无浮动均可:position:absolute;

          第一种方式(负边距法):left:50%;margin-left:- width/2。

          第二种方式:必须有宽度(宽度可以为百分比)设置 left:0;right:0;margin: 0 auto(加分!)

二、垂直居中

(1)行级元素:line-height : 跟高度一致

(2)块级元素:① display:table-call 再用vertical-align:center;

② 负边距法

③ 必须有宽度(宽度可以为百分比),设置 position:absolute,设置top:0;bottom:0;margin:auto 0;

看到这我们知道了:

设置属性有position:absolute的元素的水平垂直居中可以这样:

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

要求有宽度,但是宽度可以为百分比,适用于移动端。

你可能感兴趣的:(如何居中一个元素?)