最全面的水平垂直居中解决方案和flexbox布局

等），父元素CSS设置如下：#container{text-align:center;}并适用于文本、链接、内联或内联块、内联表和内联弹性。Demo块元素水平居中要实现块元素（display:block）的水平居中，我们只需要将其左右边距margin-left和margin-right设置为auto即可实现块元素居中。块元素水平居中的CSS设置如下：#center{margin:0auto;}Demo多个块元素水平居中实现多个水平排列的块元素水平居中，传统的做法是水平排列设置display:inline-block的block元素，然后在父元素上设置text-align:center，达到和上面的inline元素水平居中一样的效果。#container{text-align:center;}#center{display:inline-block;}Demo使用flexbox实现多个块元素水平居中在使用之前先介绍一下flexbox。弹性盒布局（FlexibleBox）模块旨在提供一种更有效的方式来制定、调整和分布容器中项目的布局，即使它们的大小是未知的或动态的。它是CSS3中一种新的布局模式，专为现代网络中更复杂的网页需求而设计。Flexbox很快就得到了浏览器的支持。Chrome22+、Opera12.1+和OperaMobile12.1+、firefox18+已经支持Flexbox，如本文所述。　　学习使用flexbox要为元素设置flexbox布局，只需将display属性值设置为flex。1#container{2display:flex;3}flexbox默认是块级元素。如果需要将其定义为行内级元素，同样如此：1#container{2display:inline-flex;3}flexbox是由弹性容器和弹性项定义的。可以通过将元素的显示属性设置为flex或inline-flex来获得灵活的容器。设置为flex的容器呈现为块级元素，而设置为inline-flex的容器呈现为内联元素。而每一个被设置为flex的容器，其内部的元素都会变成一个flexitem，也就是一个stretchitem。简单的说，flex定义了灵活容器中的灵活项目应该如何布局。回到正题，使用flexbox实现多块元素水平居中，只需要设置父容器的css如下：1#container{2justify-content:center;3display:flex;4}Demo已知高宽元素水平和垂直居中方法1.绝对定位和负边距实现。使用绝对定位，将元素的top和left属性分别设置为50%，然后使用marginmargin将元素拉回其高度和宽度的一半，实现垂直居中。核心CSS代码如下：#container{position:relative;}#center{width:100px;高度：100px；位置：绝对；顶部：50%；左：50%；margin:-50px00-50px;}Demo方法二、绝对定位和边距。此方法也使用绝对定位和边距，但不需要知道垂直居中元素的高度和宽度。核心代码如下：#container{position:relative;}#center{position:absolute;保证金：自动；顶部：0；底部：0；左：0；right:0;}Demo未知高宽元素的水平和垂直居中方法一、当要居中的元素是inline或inline-block元素时，当要居中的元素是inline或inline-block时，可以巧妙设置父容器为display:table-cell，配合text-align:center和vertical-align:middle可以实现水平和垂直居中。核心代码如下：#container{display:table-cell;文本对齐：居中；vertical-align:middle;}#center{}Demo方法二、css3大显身手利用css3的transform，可以轻松改变未知元素的高度在width的情况下实现元素的垂直居中。核心代码如下：#container{position:relative;}#center{position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}Demo方法3.flex布局很简单解决使用flex布局的问题，不需要改变绝对定位，水平垂直居中等布局的元素可以很容易地实现。核心代码如下：#container{display:flex;证明内容：居中；align-items:center;}#center{}Demo一些总结CSS3transform和flex很好用，但是在项目实际应用中必须考虑兼容性问题，大量hack代码可能得不偿失。部分浏览器仍需使用前缀写法：1.flexboxtest{2display:flex;3display:-webkit-flex;//Safari仍然需要使用特定的浏览器前缀4}本文介绍的flex的用法只是一小部分，flex还有其他强大的功能。学前端的同学注意啦！！！如果大家在学习过程中遇到任何问题或者想获取学习资源，欢迎加入前端学习交流群461593224，一起来学习前端吧！