你的位置:首页 > 软件开发 > 网页设计 > 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

发布时间:2016-04-13 22:00:05
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法:1.使用CSS3中的Flex布局对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用!!!!!),除了设置display:flex之 ...

使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法:

1.使用CSS3中的Flex布局

对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用!!!!!),除了设置display:flex之外,还有另外两个属性需要设置,分别是justify-content和align-items,他们的意思分别是水平居中和垂直居中。HTML+CSS代码如下:

body {  position: absolute;  width: 100%;  height: 100%;  display: flex;  justify-content: center;  align-items: center;}.parentNode {  width: 400px;  height: 400px;  background: #f00;}

原标题:使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。