不定高度的弹框垂直水平居中

原创于 2018-09-05 10:25:51 发布 · 1.7k 阅读

CC 4.0 BY-SA版权

文章标签：

14 篇文章

订阅专栏

本文介绍了四种不同的CSS技术来实现子元素在父元素中水平垂直居中：使用绝对定位结合margin属性、利用CSS3的transform属性、采用Flex布局以及设置display为box。这些方法适用于不同的浏览器环境，从IE7到现代浏览器。

子元素宽度一般会有，比如给80%；高度不固定
一、定位与margin
子元素设置：

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

兼容IE7以上

二、css3的transfrom
子元素设置：

position：absolute;left:50%；top:50%;transfrom:translate(-50%,-50%);

兼容IE8以上

三、flex布局
父元素设置：

display:flex;justify-content:center;align-items:center

这里写图片描述

四、设置display:box
父元素设置：

display:box; box-pack:center; box-align:center; 
display:-webkit-flexbox; -webkit-box-pack:center; -webkit-box-align:center;

这里写图片描述

不定高度的弹框 垂直水平居中