web前端学习时，css是一门必会的技术。群里有很多小伙伴在问我css如何实现body元素下div垂直居中。今天浙江优就业杭州it培训的老师就带大家一起来学习一下。希望可以帮助大家成为一名优秀的web前端工程师。
在网站登陆的时候，我们经常看到垂直居中于页面的登录框。
在前端开发的时候经常会遇到垂直居中问题，父类宽高位置的情况下，实现宽高已知子类的垂直居中布局。
html代码如下：
css实现如下：
第一种：主要使用transform属性
第二种：同样使用transform属性
第三种：使用top,margin,padding属性组合
第四种：使用margin：0auto（水平居中）和position:fixed;
扩展：
（1）transform是css3的属性，包括：
translate()移位，
rotate()旋转，单位：deg
skew()倾斜，单位：deg
scale()缩放，放大为正数，缩小为负数
这些属性均包含x，y之分。
比如transform：translate(10px，10%),可以分开去写：transform：translateX（10px）translateY（10%）；
支持情况：InternetExplorer10、Firefox、Opera支持transform属性。
（2）position:fixed
fixed绝对定位，相对于浏览器窗口
学习更多web前端、互联网营销、UI交互设计、java、php编程语言请持续