盒子模型自适应水平垂直居中的方法

1.Flexbox布局：

display:flex;

justify-content:center;

align-items:center;

width:100%;

2.Bootstrap栅格布局：

一共12格，分成3块，每块占4列。居中的内容写在中间的那一块。

3.圣杯/双飞翼（水平自适应居中的基础上）

第一步：居中的div写在最前面，width:100%撑满一整行。三个div都向左浮动float:left;

Main

Left

Right

第二步：让三个div显示在同一行

div.left{marin-left:100%}

div.right{marin-left:自身的宽度}

第三步：让中间的div能够自适应

圣杯布局的做法：

div.main{

padding-left:左div的宽度；

padding-right:右div的宽度；

}

双飞翼布局的做法：

在div.main内部再添加一个div.mc：

然后设置div.mc的margin值

margin-left:左div的宽度；

margin-right:右div的宽度

现在，水平居中已经实现了；

第四步：垂直居中

在div.left,div.right,div.main外面再加一个div.wrap,

顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。（537-631-707）

然后对div.con设置 display:table,对div.wrap设置

display:table-cell;

vertical-align:middle;

4.relative/positive + top/left+tarnsform；

父元素：

position:relative

子元素：

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

transform: translate(-50%, -50%);意思是向右移动自身50%的宽度，向下移动自身50%的高度。

为什么有了top:50%;left:50%还要 transform: translate(-50%, -50%);

最初：

加了top:50%;left:50%后：

还需要再往左、往上挪一挪：

5.relative/positive + top/left+left + margin；

和方法4一样，用top和left挪到中间：

这之后用margin-left和margin-right进行处理：

先给div.child设置宽度，然后设置margin：

6.用top,left,bottom,right；

计算公式：

top + div.child 的 height +bottom = div.parent 的 height

left + div.child 的 width +right = div.parent 的 width

如果子元素是行内元素，如<p>,要注意一开始就要去掉margin和padding

温馨提示：文章素材来源于网络，版权归原作者所有！