【前端攻略】最全面的水平垂直居中方案与flexbox布局
最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案。而且在Css3的flexbox出现之后,解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。由简至繁:
行内元素的水平居中
要实现行内元素(<span>、<a>等)的水平居中,只需把行内元素包裹在块级父层元素(<div>、<li>、<p>等)中,并且在父层元素CSS设置如下:
#container{
text-align:center;
}
并且适用于文字,链接,及其inline或者inline-block、inline-table和inline-flex。
块状元素的水平居中
要实现块状元素(display:block)的水平居中,我们只需要将它的左右外边距margin-left和margin-right设置为auto,即可实现块状元素的居中,要水平居中的块状元素CSS设置如下:
#center{
margin:0 auto;
}
多个块状元素的水平居中
要实现多个水平排列的块状元素的水平居中,传统的方法是将要水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align:center,达到与上面的行内元素的水平居中一样的效果。
#container{
text-align:center;
} #center{
display:inline-block;
}
使用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;
}
已知高度宽度元素的水平垂直居中
法一 绝对定位与负边距实现
利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。核心CSS代码如下:
#container{
position:relative;
} #center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
法二 绝对定位与margin
这种方法也是利用绝对定位与margin,但是无需知道被垂直居中元素的高和宽。核心代码如下:
#container{
position:relative;
} #center{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
(同上故不再截图)
未知高度和宽度元素的水平垂直居中
法一. 当要被居中的元素是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{ }
法二. Css3显威力
利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
核心代码如下:
#container{
position:relative;
} #center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
法三. flex布局轻松解决
使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。
核心代码如下:
#container{
display:flex;
justify-content:center;
align-items: center;
} #center{ }
总结
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布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而 ...
- [CSS]水平垂直居中方案
简单总结一下常用的水平垂直居中方案 直接在父级元素设置 text-align 和 line-height ,针对未浮动的行内元素 <div class="box"> & ...
- Web前端几种常见的实现水平垂直居中的方法
第一种: 父容器不设置宽度,用定位实现水平垂直居中. <!DOCTYPE html> <html lang="en"> <head> <m ...
- 【前端攻略】:玩转图片Base64编码
引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码.标题略大,不过只是希望通过一些浅显 ...
- 【前端攻略】:玩转图片Base64编码(转)
引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的Base64编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的base64编码.标题略大,不过只是希望通过一些浅显的论述, ...
- 用CSS/CSS3 实现 水平居中和垂直居中的完整攻略
水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center; } 水 ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
- 53.CSS---CSS水平垂直居中常见方法总结
CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...
随机推荐
- js基础3
内置对象 内置对象就是JS提供的一套工具箱,我们通过内置可以很方便的进行一些操作. Math对象: Math.ceil() //向上取整,天花板 Math.floor() //向下取整,地板 Math ...
- qunit 前端脚本测试用例
首先引用qunit 测试框架文件 <link rel="stylesheet" href="qunit-1.22.0.css"> <scrip ...
- Android中获取选择图片与获取拍照返回结果差异
导语: 如今的安卓应用在选择图片的处理上大多合并使用拍照和从相册中选择这两种方式 今天在写一个这样的功能时遇到一个尴尬的问题,同样是拍照获取图片功能,在不同手机上运行的效果不一样,下面是在某型手机上测 ...
- 安卓端360度全景图的html5实现
这里是一款旅游相关的安卓应用,其中虚拟旅游的功能采用html5的360度全景图技术实现,使用户能够身临其境的感受旅游景点的风光. 此处引入了ddpanorama插件,它的原理是在canvas上绘制全景 ...
- phpMoadmin CVE-2015-2208 远程代码执行漏洞分析
原文:http://www.thinkings.org/2015/03/05/cve-2015-2208-phpmoadmin-exec-vul.html phpMoAdmin 是一个用PHP 开发的 ...
- 下载apk文件浏览器会直接打开并显示乱码的问题
今天同事反映他的apk文件在自己的老项目中下载有问题:下载apk文件浏览器会直接打开并显示乱码,在别的项目中就没有问题. 后分析response的content-type发现,老项目的类型是text/ ...
- requireJs--简单的使用方法
简单使用: <!-- index.html部分 data-main 为入口 --> <script data-main="js/app.js" src=" ...
- c# GridControl怎么换行
百度找到的答案 1.ColumnEdit 增加 MemoEdit2.AppearanceCell-TextOptions- WordWrap3.OptionsView RowAutoHeight
- WPF之命令浅谈
一.认识命令 1.1命令的特点 提到“命令”,我们应该想到命令的发出者,命令的接受者,命令的内容,准备工作,完成任务,回报工作...与事件中的发送者,接受者,消息,处理,处理,处理一一对应,如果是单纯 ...
- 依赖倒置(DIP)与依赖注入(DI)
依赖倒置原则(Dependency Inversion Principle)为我们提供了降低模块间耦合度的一种思路,依赖注入(Dependency Injection)是一种具体的实施方法. 依赖倒置 ...