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

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

原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小叙

绝对定位多个字居中显示的css

在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定...

2779
来自专栏熊二哥

Html与CSS快速入门03-CSS基础应用

这部分是html细节知识的学习。 ? ? 边框、填充、对齐和浮动 这部分将主要介绍使用CSS控制整个Web页面的各个方面,通常来说,会使用margin(外部)...

2468
来自专栏进步博客

CSS表格布局实践

如何实现上图所示效果:左右两列的列宽由列内最宽单元格的宽度决定,进度条列占据剩余空间。(兼容到IE8就好了)

1293
来自专栏我和未来有约会

CaseStudy(showcase)布局篇-列表的排放与遮罩

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1909
来自专栏IMWeb前端团队

css中如何做到容器按比例缩放

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 在说容易按比例缩放前,我们先说下图片按比例缩放。 对于图片,默认只设置图片的...

2649
来自专栏Android开发小工

利用Android嵌套滑动机制轻松实现顶部布局置顶

传统的Android事件分发是子控件消费了事件,那么父控件就不能再处理这个事件了。也就是说一旦内部的滑动控件消费了滑动操作,外部的滑动控件就不能获取到这个滑动动...

1503
来自专栏项勇

笔记74 | 学习掌握ConstraintLayout的基本属性

2215
来自专栏Python攻城狮

HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

3713
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

3289
来自专栏九彩拼盘的叨叨叨

学习纲要:常见标签和属性

892

扫码关注云+社区

领取腾讯云代金券