【前端攻略】最全面的水平垂直居中方案与flexbox布局

 

最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案。而且在Css3的flexbox出现之后,解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。

由简至繁:

行内元素的水平居中    

要实现行内元素(<span>、<a>等)的水平居中,只需把行内元素包裹在块级父层元素(<div>、<li>、<p>等)中,并且在父层元素CSS设置如下:

1
2
3
#container{
    text-align:center;
}

并且适用于文字,链接,及其inline或者inline-block、inline-table和inline-flex。

Demo

块状元素的水平居中    

要实现块状元素(display:block)的水平居中,我们只需要将它的左右外边距margin-left和margin-right设置为auto,即可实现块状元素的居中,要水平居中的块状元素CSS设置如下:

1
2
3
#center{
    margin:0 auto;
}

Demo

多个块状元素的水平居中    

要实现多个水平排列的块状元素的水平居中,传统的方法是将要水平排列的块状元素设为display:inline-block,然后在父级元素上设置text-align:center,达到与上面的行内元素的水平居中一样的效果。

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码

Demo

使用flexbox实现多个块状元素的水平居中

在使用之前,首先介绍一下flexbox

Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。是CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。

Flexbox 已经被浏览器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ,firefox18+已经支持了本文中所描述的 Flexbox。

  

学会使用flexbox

要为元素设置flexbox布局,只需将display属性值设置为flex。

1 #container {
2 display: flex;
3 }

flexbox的默认为一个块级元素,如果需要定义为一个行内级的元素,同理:

1 #container {
2 display: inline-flex;
3 }

flexbox由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或者inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。而每一个被设置为flex的容器,它的内部元素都将变成一个flex项目,即是一个伸缩项目。简单的说,flex 定义了伸缩容器内伸缩项目该如何布局。

回到正题,利用flexbox实现多块状元素的水平居中,只需要将父级容器的Css设置如下:

1 #container{
2 justify-content:center;
3 display:flex;
4 }

Demo

已知高度宽度元素的水平垂直居中    

法一.

绝对定位与负边距实现。

利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。核心CSS代码如下:

 1 #container{
2 position:relative;
3 }
4
5 #center{
6 width:100px;
7 height:100px;
8 position:absolute;
9 top:50%;
10 left:50%;
11 margin:-50px 0 0 -50px;
12 }

Demo

法二.

绝对定位与margin。

这种方法也是利用绝对定位与margin,但是无需知道被垂直居中元素的高和宽。核心代码如下:

 1 #container{
2 position:relative;
3 }
4
5 #center{
6 position:absolute;
7 margin:auto;
8 top:0;
9 bottom:0;
10 left:0;
11 right:0;
12 }

(同上故不再截图)

Demo

未知高度和宽度元素的水平垂直居中    

法一.  当要被居中的元素是inline或者inline-block元素

当要被居中的元素是inline或者inline-block的时候,可以巧妙的将父级容器设置为display:table-cell,配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

核心代码如下:

1 #container{
2 display:table-cell;
3 text-align:center;
4 vertical-align:middle;
5 }
6
7 #center{
8
9 }

Demo

法二. Css3显威力

利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

核心代码如下:

 1 #container{
2 position:relative;
3 }
4
5 #center{
6 position: absolute;
7 top: 50%;
8 left: 50%;
9 transform: translate(-50%, -50%);
10 }

Demo

法三. flex布局轻松解决

使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。

核心代码如下:

1 #container{
2 display:flex;
3 justify-content:center;
4 align-items: center;
5 }
6
7 #center{
8
9 }

Demo

一些总结    

CSS3的transform和flex固然好用,但在项目的实际运用中必须考虑兼容问题,大量的hack代码可能会导致得不偿失。

某些浏览器仍需使用前缀写法:

1 .flexboxtest{
2 display: flex;
3 display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀
4 }

浏览器对最新版本的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布局的更多相关文章

  1. 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...

  2. [CSS]水平垂直居中方案

    简单总结一下常用的水平垂直居中方案 直接在父级元素设置 text-align 和 line-height ,针对未浮动的行内元素 <div class="box"> & ...

  3. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  4. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

  5. 53.CSS---CSS水平垂直居中常见方法总结

    CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...

  6. CSS水平垂直居中常见方法总结

    1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区 ...

  7. div水平垂直居中方法及优缺点

    代码: <div class="father"> <div class="son"> </div></div> ...

  8. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  9. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

随机推荐

  1. HTML、CSS、JavaScript拾遗

    1.html元素中,如果有文本存在,当元素大小不足以容纳文本时,文本会进行强制换行.比如说设置页面不出现滚动条,body的overflow为hidden时,或者scroll为no时,span在超过页面 ...

  2. DELPHI XE5轻松输出到MacOsX

    配置:MACOSX10.9.3 +XCODE5.1 + VBOX + WINXP + DELPHI XE 5UP2 配置步骤从略. 1.选择firemonkey desktop application ...

  3. Android之AlterDialog介绍

    效果: 1.简单对话框 AlertDialog.Builder builder=new AlertDialog.Builder(AlterDialogActivity.this); builder . ...

  4. web api 设置允许跨域,并设置预检请求时间

    <httpProtocol> <customHeaders> <!--响应类型 (值为逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法)--> <ad ...

  5. 一、认识Node.js

    1.什么是Note.js? 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个 Javascript 运行环境(runtime).它让 JavaScript 可 ...

  6. Java读写配置文件prop.properties

    Java读写配置文件prop.properties @Test public void fun() throws IOException{ Properties prop=new Properties ...

  7. Logic Controller(逻辑控制器)

    逻辑控制器主要用来控制采样器的执行顺序,仅对其子节点的逻辑控制器和采样器其作用. 1.Simple Controller(简单控制器) 简单控制器主要用来组织其他逻辑控制器和采样器,提供了一个块的结构 ...

  8. django使用auth模块进行身份认证

    https://docs.djangoproject.com/zh-hans/2.0/topics/auth/default/#authentication-in-web-requests djang ...

  9. 【转】C# WinForm获取当前路径汇总

    源地址:https://www.cnblogs.com/greatverve/archive/2011/12/15/winform-path.html

  10. windows10 docker 使用以及虚拟机下fastDFS 的使用教程

    我们 先来了解下 什么是docker?   Docker的思想来自于集装箱,集装箱解决了什么问题?在一艘大船上,可以把货物规整的摆放起来.并且各种各样的货物被集装箱标准化了,集装箱和集装箱之间不会互相 ...