解读 CSS 布局之水平垂直居中

2017-06-23  本文已影响0人  乱蓬头199302

摘要:flexbox是个很强大的布局模块,三个属性就搞定居中,而且不论父容器还是居中元素都可以不定宽高

水平居中

align="center"

直接在标签对象内加align="center"即可让对象内图片横向水平居中显示

align="center"使用方法:

aaa

text-align:center

.divcss5{text-align:center}aaa

text-align是针对父元素进行设置,只能对图片,按钮,文字等行内元素(display为inline或inline-block等)起作用,起作用的首要条件是子元素必须没有被float影响。但要说明的是在IE6、7这两个奇葩的浏览器中,它是能对任何元素进行水平居中的

把margin设为auto

具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效

body{text-align:center}.div{margin:0auto;}aaa

使用display:table-cell来居中

表格中只要用到 td(或 th)元素的align="center"和valign="middle"这两个属性就可以完美处理,而且表格默认对它里面的内容进行垂直居中。在css中控制表格内容的居中可以使用vertical-align:middle,至于水平居中,css中没有相对应的属性的,但在IE6、7中可以用text-align:center对表格里的元素设置,IE8+及谷歌、火狐等的text-align:center只对行内元素起作用,对块状元素无效

对于不是表格的元素,可以通过display:table-cell 来模拟成一个表格单元格,这样就可以利用表格很方便的居中特性了

   

aaa

使用绝对定位来进行居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把绝对定位元素的left属性设为50%,此时元素并不居中,而是比向右偏了这个元素宽度的一半,需要使用一个负的margin-left把它拉回到居中的位置,这个负的margin值就取元素宽度的一半

使用这个方法的好处在于无论你是什么形式的内容都可以马上居中,而缺点就是必须对元素有确定的宽高值,否则的话可能就需要通过javascript来进行一些小计算了

原文链接

上一篇下一篇

猜你喜欢

热点阅读