最全面的水平垂直居中方案与flexbox布局

Myth丶恋晨 2022-08-04 16:52 255阅读 0赞

最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽，故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。  
  
由简至繁：  
  
行内元素的水平居中      
  
要实现行内元素（<span>、<a>等）的水平居中，只需把行内元素包裹在块级父层元素（<div>、<li>、<p>等）中，并且在父层元素CSS设置如下：

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

复制代码

并且适用于文字，链接，及其inline或者inline-block、inline-table和inline-flex。  
  
![211510307039537.jpg][]   
  
　　[Demo][]   
  
  
  
块状元素的水平居中      
  
要实现块状元素（display:block）的水平居中，我们只需要将它的左右外边距margin-left和margin-right设置为auto，即可实现块状元素的居中，要水平居中的块状元素CSS设置如下：

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

复制代码

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

1.  \#container\{  
    
2.      text-align:center;  
    
3.  \}  
    
4.    
    
5.  \#center\{  
    
6.      display:inline-block;  
    
7.  \}

复制代码

![211557324214454.jpg][]   
  
  
　　[Demo][Demo 2]  
  
使用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.  \}

复制代码

![211621459216201.jpg][]   
  
  
　[Demo][Demo 3]  
  
已知高度宽度元素的水平垂直居中      
  
法一.  
  
绝对定位与负边距实现。  
  
利用绝对定位，将元素的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. \}

复制代码

![211706247502238.jpg][]   
  
　　[Demo][Demo 4]  
  
法二.  
  
绝对定位与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][Demo 5]  
  
未知高度和宽度元素的水平垂直居中      
  
法一.  当要被居中的元素是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.  \}

复制代码

![211733434531605.jpg][]   
  
  
　　[Demo][Demo 6]  
  
法二. 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. \}

复制代码

![211807460315685.jpg][]   
  
　　[Demo][Demo 7]  
  
法三. flex布局轻松解决  
  
使用flex布局，无需绝对定位等改变布局的操作，可以轻松实现元素的水平垂直居中。  
  
核心代码如下：

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

复制代码

![211816323284565.jpg][]   
  
　　[Demo][Demo 8]  
  
一些总结      
  
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属性

[211510307039537.jpg]: http://bbs.html5cn.org/data/attachment/forum/201505/07/115858autvtrwvvbp1xw5p.jpg
[Demo]: http://runjs.cn/code/fd4bc28v
[211556580316893.jpg]: http://bbs.html5cn.org/data/attachment/forum/201505/07/115952j0z5wvsvysm4ap49.jpg
[Demo 1]: http://runjs.cn/code/oxsa8aia
[211557324214454.jpg]: http://bbs.html5cn.org/data/attachment/forum/201505/07/120048v299bba29gb8k8cy.jpg
[Demo 2]: http://runjs.cn/code/t2mbfexa
[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16
[211621459216201.jpg]: http://bbs.html5cn.org/data/attachment/forum/201505/07/1202182f0qdy4ecaad0050.jpg
[Demo 3]: http://runjs.cn/code/pgwgqu1x
[211706247502238.jpg]: http://bbs.html5cn.org/data/attachment/forum/201505/07/1203043yv3d34yqy7rydgv.jpg
[Demo 4]: http://runjs.cn/code/vofzjlxc
[Demo 5]: http://runjs.cn/code/pbqtr8ut
[211733434531605.jpg]: http://bbs.html5cn.org/data/attachment/forum/201505/07/120424efny7xtzdoggn5xy.jpg
[Demo 6]: http://runjs.cn/code/zbeb6eby
[211807460315685.jpg]: http://bbs.html5cn.org/data/attachment/forum/201505/07/120508c5qn3jw3we7j4p57.jpg
[Demo 7]: http://runjs.cn/code/i0brxxuf
[211816323284565.jpg]: http://bbs.html5cn.org/data/attachment/forum/201505/07/120704gz5wg6g67xw7zhmg.jpg
[Demo 8]: http://runjs.cn/code/cz1zt2qo