DIV水平方向居中的几种方法

一、使用margin:

1 #center0 {

2     background: red;

3     margin: 0 auto;

4 }

或者：

     margin: auto;

这样的前提是父盒子里没有其他盒子。

二、使用position（有些地方不太好用）

#center1{

    position: absolute;

    left:50%;

    margin-left: -(div宽度的一半)

}

三、使用伸缩盒flex

在需要居中的盒子外面再包一层盒子，对这个父盒子进行设置：

     display: flex;

     justify-content: center;

     align-items: center;

伸缩盒是个很强大的工具，对屏幕适配性有很好的支持

四、-webkit-box

 #d5 {

     width: 100%;

     display: -webkit-box;

     -webkit-box-pack: center;

 }

给父元素设置上述代码。这个属性比较奇特，去查了一下，有些争议，表示也无法深入理解，可以参考这里的讨论：

https://www.zhihu.com/question/22991944

五、使用table

 .grandfather {

     width: 100%;

     height: 100%;

     display: table;

 }

 .father{

     display: table-cell;

     text-align: center;

 }

 .son {

     display: inline-block;

     background: green;

 }

这里的最内部盒子son居中

六、使用position和transform

 #center6{

     position:absolute;

     left:50%;

     transform:translateX(-50%);

     background:#08ffbc;

 }

这个跟position+margin原理相同，都是将多余部分移回原位，但是不需要计算具体大小，用百分比适配性好

巴特西

DIV水平方向居中的几种方法

一、使用margin:

二、使用position（有些地方不太好用）

三、使用伸缩盒flex

四、-webkit-box

五、使用table

六、使用position和transform

最新文章

热门文章