【前端攻略】最全面的水平垂直居中方案与flexbox布局
2015-04-21 18:36
656 查看
最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案。而且在Css3的flexbox出现之后,解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。
由简至繁:
行内元素的水平居中
要实现行内元素(<span>、<a>等)的水平居中,只需把行内元素包裹在块级父层元素(<div>、<li>、<p>等)中,并且在父层元素CSS设置如下:
并且适用于文字,链接,及其inline或者inline-block、inline-table和inline-flex。
Demo
块状元素的水平居中
要实现块状元素(display:block)的水平居中,我们只需要将它的左右外边距margin-left和margin-right设置为auto,即可实现块状元素的居中,要水平居中的块状元素CSS设置如下:
Demo
多个块状元素的水平居中
要实现多个水平排列的块状元素的水平居中,传统的方法是将要水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align:center,达到与上面的行内元素的水平居中一样的效果。
Demo
使用flexbox实现多个块状元素的水平居中
在使用之前,首先介绍一下flexbox。
Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。是CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。
Flexbox 已经被浏览器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ,firefox18+已经支持了本文中所描述的 Flexbox。
学会使用flexbox
要为元素设置flexbox布局,只需将display属性值设置为flex。
flexbox的默认为一个块级元素,如果需要定义为一个行内级的元素,同理:
flexbox由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或者inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。而每一个被设置为flex的容器,它的内部元素都将变成一个flex项目,即是一个伸缩项目。简单的说,flex 定义了伸缩容器内伸缩项目该如何布局。
回到正题,利用flexbox实现多块状元素的水平居中,只需要将父级容器的Css设置如下:
Demo
已知高度宽度元素的水平垂直居中
法一.
绝对定位与负边距实现。
利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。核心CSS代码如下:
Demo
法二.
绝对定位与margin。
这种方法也是利用绝对定位与margin,但是无需知道被垂直居中元素的高和宽。核心代码如下:
(同上故不再截图)
Demo
未知高度和宽度元素的水平垂直居中
法一. 当要被居中的元素是inline或者inline-block元素
当要被居中的元素是inline或者inline-block的时候,可以巧妙的将父级容器设置为display:table-cell,配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
核心代码如下:
Demo
法二. Css3显威力
利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
核心代码如下:
Demo
法三. flex布局轻松解决
使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。
核心代码如下:
Demo
一些总结
CSS3的transform和flex固然好用,但在项目的实际运用中必须考虑兼容问题,大量的hack代码可能会导致得不偿失。
某些浏览器仍需使用前缀写法:
浏览器对最新版本的flexbox 的支持情况如下:
Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+ (prefixed with -webkit-)
Android 4.4+
iOS 7.1+ (prefixed with -webkit-)
文中介绍的flex用法只是一小部分,flex还有着其他强大的功能。本文主要介绍水平垂直居中的方法,具体的flex教学,可以移步:图解CSS3 Flexbox属性
原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
由简至繁:
行内元素的水平居中
要实现行内元素(<span>、<a>等)的水平居中,只需把行内元素包裹在块级父层元素(<div>、<li>、<p>等)中,并且在父层元素CSS设置如下:
#container{ text-align:center; }
并且适用于文字,链接,及其inline或者inline-block、inline-table和inline-flex。
Demo
块状元素的水平居中
要实现块状元素(display:block)的水平居中,我们只需要将它的左右外边距margin-left和margin-right设置为auto,即可实现块状元素的居中,要水平居中的块状元素CSS设置如下:
#center{ margin:0 auto; }
Demo
多个块状元素的水平居中
要实现多个水平排列的块状元素的水平居中,传统的方法是将要水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align:center,达到与上面的行内元素的水平居中一样的效果。
#container{ text-align:center; }
#center{
display:inline-block;
}
Demo
使用flexbox实现多个块状元素的水平居中
在使用之前,首先介绍一下flexbox。
Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。是CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。
Flexbox 已经被浏览器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ,firefox18+已经支持了本文中所描述的 Flexbox。
学会使用flexbox
要为元素设置flexbox布局,只需将display属性值设置为flex。
#container { display: flex; }
flexbox的默认为一个块级元素,如果需要定义为一个行内级的元素,同理:
#container { display: inline-flex; }
flexbox由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或者inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。而每一个被设置为flex的容器,它的内部元素都将变成一个flex项目,即是一个伸缩项目。简单的说,flex 定义了伸缩容器内伸缩项目该如何布局。
回到正题,利用flexbox实现多块状元素的水平居中,只需要将父级容器的Css设置如下:
#container{ justify-content:center; display:flex; }
Demo
已知高度宽度元素的水平垂直居中
法一.
绝对定位与负边距实现。
利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。核心CSS代码如下:
#container{ position:relative; } #center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }
Demo
法二.
绝对定位与margin。
这种方法也是利用绝对定位与margin,但是无需知道被垂直居中元素的高和宽。核心代码如下:
#container{ position:relative; } #center{ position:absolute; margin:auto; top:0; bottom:0; left:0; right:0; }
(同上故不再截图)
Demo
未知高度和宽度元素的水平垂直居中
法一. 当要被居中的元素是inline或者inline-block元素
当要被居中的元素是inline或者inline-block的时候,可以巧妙的将父级容器设置为display:table-cell,配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
核心代码如下:
#container{ display:table-cell; text-align:center; vertical-align:middle; } #center{ }
Demo
法二. Css3显威力
利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
核心代码如下:
#container{ position:relative; } #center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Demo
法三. flex布局轻松解决
使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。
核心代码如下:
#container{ display:flex; justify-content:center; align-items: center; } #center{ }
Demo
一些总结
CSS3的transform和flex固然好用,但在项目的实际运用中必须考虑兼容问题,大量的hack代码可能会导致得不偿失。
某些浏览器仍需使用前缀写法:
.flexboxtest{ display: flex; display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀 }
浏览器对最新版本的flexbox 的支持情况如下:
Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+ (prefixed with -webkit-)
Android 4.4+
iOS 7.1+ (prefixed with -webkit-)
文中介绍的flex用法只是一小部分,flex还有着其他强大的功能。本文主要介绍水平垂直居中的方法,具体的flex教学,可以移步:图解CSS3 Flexbox属性
原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
相关文章推荐
- 【前端攻略】最全面的水平垂直居中方案与flexbox布局
- 最全面的水平垂直居中方案与flexbox布局
- 最全面的水平垂直居中方案与flexbox布局
- CSS垂直水平居中,display:flex,布局,文字属性的一些零碎
- CSS 最全面的水平垂直居中方案
- css+div水平垂直居中布局总结(3种方案)
- css---flex布局中,如何响应式 得水平垂直居中?flex子元素左右 上下居中
- css布局:水平和垂直方向都居中,以及用flex实现
- 最全面的水平垂直居中方案与flexbox布局
- 超级实用的CSS布局方案之水平垂直居中
- css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案
- CSS布局——简洁、兼容性强的垂直水平居中方案
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
- [前端开发] 垂直居中,flexbox/table-cell/absolute
- Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
- 等高列布局、水平垂直居中与置顶页脚
- css布局之水平垂直居中
- 把HTML标签设置成水平或垂直居中的二种方案除IE6外都兼容
- 如何在页面布局中实现元素水平+垂直居中
- 网页元素居中攻略记_(6)图片水平垂直居中