如何让div在父元素中水平且垂直居中

发布网友发布时间：2022-11-08 19:53

共1个回答

热心网友时间：2023-11-12 10:56

实现效果：

利用定位margin取值让子元素居中:

margin取值应为子元素宽高的一半（margin的取值可以为负值，但padding显然不行），缺点是必须知道子元素的宽高具体大小且需要计算，当子元素的大小被修改后对应的margin值也需要修改否则达不到剧中的效果，从而引导我们使用更方便快捷的方法。
利用定位与transform实现垂直水平居中：

transform：translate（-50%，-50%）第一个-50%是指x轴方向向左位移子元素本身宽的百分之50，而第二个-50%是指元素在y轴方向向上平移子元素本身高的百分之50。
二者的原理是相同的都是在加了 left：50% 与 top：50% 后再减去盒子宽高的一半来实现水平垂直居中。

给父元素添加display：flex；让它变成弹性盒，在利用justify-content: center;与 align-items: center;，让子元素在主轴与交叉轴（纵轴）方向居中。缺点是在网页端弹性盒因为兼容问题一般不被经常使用。

设置一个元素在一个容器中垂直居中，必须更改默认的 display 属性值为 inline-block; 并加上同级元素（标尺）（同级元素[标尺]样式设置为 vertical-align:middle;width:0;height:100%;display:inline-block; ）
三个条件：

原理类似于利用弹性布局，将父元素转换为网格元素再利用 ustify-items：center （内容在单元格内的水平对齐方式），和 align-items：center；（内容在单元格内垂直对齐方式） place-items 为复合写法，相当于父元素为一个一行一列的单元格而box1为它单元格中的元素。（其实很利用 place-content 也能做到原理还没搞懂...）