div水平居中(怎么让div中的div居中)

前端这点事 24 0

在实际工作中,经常会遇到容器居中问题,而CSS容器水平和垂直居中的方法,网络上已经有很多相关文章,在这里,我也对工作中用到的一些居中方法进行了总结,并加入了一些自己的观点,如有错误欢迎指正。

假设有如下html和样式,我们需要将inner容器居中:

 

一、绝对定位:首先让outer相对定位relative,其次让inner绝对定位absolute,同时left和top都是50%,此时inner的左上角在outer的正中间,所以,只要让它margin-left和margin-top都是负的自身高度的一半即可:

 

效果如下:

 

此外,这种写法的:

margin-left和margin-top也可以换成transform:translate(-100px,-100px)。

注:这里的inner是必须要有宽高

二、绝对定位2:首先让outer相对定位relative,其次让inner绝对定位absolute,四个方向的距离都为0,再加上margin:auto即可:

 

效果如下:

 

注:这里的inner是必须要有宽高的,因为四个方向都为0,一旦不写宽度,inner就会“触及底线”。

三、模拟单元格table-cell:因为表格单元格的vertical-align:middle,可以轻松让里面的内容垂直居中,这个方法就是利用这个特性来实现垂直居中的:

 

注:1、outer由于变成了表格,不再像普通的块容器宽度默认一整行,所以要加上宽度。

2、这个方法既适用于固定高度的容器,也适用于不固定高度的容器。

四、CSS3的flex:outer要变成flex容器,并且垂直居中用align-items: center,水平居中用:justify-content: center

 

注:此方法非常好用,当然不考虑兼容性。而且,inner无论是否有宽高都适用。

五、CSS3的flex配合margin:此方法可以被视为上面的升级版,outer要变成flex容器,inner边距自动即可

 

注:此方法非常好用,当然不考虑兼容性。而且,inner无论是否有宽高都适用。

标签: CSS

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~