码迷,mamicode.com
首页 > 其他好文 > 详细

元素居中显示的方法总结

时间:2016-08-06 12:41:45      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

水平居中:

1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)(比如文本元素或者a链接)

①可以使用text-align:center

固定宽度的块级元素

①使用margin:0 auto实现水平居中

②绝对定位,left:50%,margin-left:-1/2元素宽度

垂直居中:

1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)(比如文本元素或者a链接)

单行:①使用padding-top和padding-bottm相同值

   ②使用line-height,white-space:nowrap

   ③使用vertical-align:middle

多行:

2.块级元素

固定高度:①绝对定位,top:50%,margin-top:-1/2元素高度

高度不固定:①绝对定位,top:50%,translateY(-50%)

      flex布局:display:flex;flex-direction:column;justify-content:center;

元素居中显示的方法总结

标签:

原文地址:http://www.cnblogs.com/walk-on-the-way/p/5743576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!