UI设计不知道这几个居中，那可就LOW爆了
在我们平时的网页布局中，经常会遇到各种居中的问题，使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，作为一个有开发经验的前端工程师来说，会一些居中的小窍门必不可少。那么，本文就居中的一些常用方法来分享几个人畜无害，绿环保的小介绍。
1．水平居中 text-align：center；
text-align:center；在W3C标准的浏览器中，不仅仅针对文本水平居中对齐，而且对图片，按钮等行内元素(display为inline或inline-block等)进行水平居中。但素！要说的是IE这个磨人的小妖精，IE6以下版本的浏览器中，它是能对任何元素进行水平居中的，当然任何元素是包含有块级这个霸道的元素的。
2.margin:0 auto;
margin:0 auto;使我们网页布局中用得比较多的一个居中了。具体来说就是把要居中的元素的margin-left和margin-right都设为auto，通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可用水平空间，因此元素将居中。需要注意的是，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
3. 使用line-height让单行的文字垂直居中
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
4.使用display:table-cell来居中
对于那些个不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，然后结合text-align:center;vertical-align:middle;来使元素居中。
5.利用绝对定位实现居中对齐
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
6.利用css3的translate实现居中对齐
css3里的移动属性也能实现元素的水平居中对齐。但是，一样注意的是只支持高版本浏览器。IE8及以下版本想都别想了。
7.弹性盒子实现垂直水平居中
弹性盒子也是css3新增的样式，完全解决了垂直布局难的问题。氮素！一样要考虑浏览器的兼容性。
text align center
8.终极定位元素居中
通过让内部定位的盒子left，right，top，bottom四个值同时为0，然后让margin的四个值自动平分空间，实现元素的垂直水平都居中对齐。一样要注意IE7及以下低版本浏览器的不配合问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。