CSS 垂直居中常用的多种方法

垂直居中是布局中十分常见的效果之一,在面试中也是经常问到的点;CSS布局还是采取截图把代码贴出来,因为想学习只有敲出来才会有理解,只看或者复制粘贴当时都会说嗯嗯嗯。。。妙啊

①display:table-cell(此方法适用子节点没有固定宽高)

CSS 垂直居中常用的多种方法_第1张图片
结果:
CSS 垂直居中常用的多种方法_第2张图片

②定位和负边距(此方法对子节点没固定宽高不适用)

CSS 垂直居中常用的多种方法_第3张图片
结果:
CSS 垂直居中常用的多种方法_第4张图片

③ 定位和0(此方法对子节点没固定宽高不适用)

CSS 垂直居中常用的多种方法_第5张图片
结果:
CSS 垂直居中常用的多种方法_第6张图片

④定位和transform(此方法适用子节点没有固定宽高)

CSS 垂直居中常用的多种方法_第7张图片
结果:
CSS 垂直居中常用的多种方法_第8张图片
注: Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)

⑤ display:flex(IE不支持)

关于flex布局,相信每一位合格的前端开发人员都会去参考阮一峰老师的flex布局教程

Flex布局语法篇

Flex布局实例篇

CSS 垂直居中常用的多种方法_第9张图片
结果:
CSS 垂直居中常用的多种方法_第10张图片

⑥display:flex和margin:auto(此方法适用子节点没有固定宽高)

CSS 垂直居中常用的多种方法_第11张图片
结果:
CSS 垂直居中常用的多种方法_第12张图片

总结:关于垂直居中应该还会有很多方法,但是上述这些方法都是实际开发中常用的,欢迎大家的补充和指正

你可能感兴趣的:(CSS)