css中如何将div设为垂直居中

css里将div设为垂直居中的办法是设置定位，比如【position:absolute;】或【margin:auto;】。在我们必须综合考虑浏览器兼容模式时，可以用Flex合理布局方式。

文中作业环境：windows10系统软件、css 3、thinkpad t480计算机。

在css中设置div居中显示，我们通过如下所示这些方法来达到。

定位方法：position:absolute

假如子级div有界定宽和高那就可以用这种方法。留意：margin-top,和margin-left数值均是高与宽系数的一半。有兴趣的可以试一试看一下实际效果。

margin:auto法

这个也可以是定位方法。用这种方法规定子级div应设置宽数值，要不然没有用哦~margin:auto是垂直都垂直居中，如果仅仅是设定水平居中，可以设置为margin:auto 0;同样，如果仅仅是设定居中，可以设置为margin:0 auto

display:table-cell法

用这种方法主要是针对多行文字视频的竖直居中对齐。留意：text-align:center设置权限文本的水准居中对齐，vertical-align:middle设定是指竖直居中对齐。

transform:translate(x,y)法

这是css3里的新特性，假如子级原素没有设置宽和高值的话也可以用这种方法来达到。这一点在其实做响应式界面的情况下可以用到。

before，after伪元素法

这一也让子级原素居中了。假如还想水平居中得话也可以使用别的这些方法搭配使用来达到，例如给子级原素设定：margin:0 auto;这个就横向和纵向都垂直居中了。

Flex合理布局法

用这种方法一定要考虑浏览器兼容模式。要居中元素都是不用设定宽和高数值，可以用于响应式页面上来达到水准居中。

有关短视频推荐：css视频教学

以上就是关于css中如何将div设为垂直居中的具体内容，大量欢迎关注AdminJS其他类似文章！