关闭

水平、垂直居中的若干种方法总结

199人阅读 评论(0) 收藏 举报
分类:

一、水平居中

水平居中的实现很简单,这儿就不赘述了。
行内元素使用:text-align:center 可以做到水平居中
块级元素使用:margin: 0 auto 可以做到水平居中

二、垂直居中

2.1 行内元素居中

单行的垂直居中可以通过设置元素line-height为父元素的高度,完成垂直居中

2.2 块级元素居中

  • 2.2.1 使用table-cell

    对父级元素设置display和vertical-align:

display:table-cell;
vertical-align: middle;
  • 2.2.2 已知元素宽高时,使用absolute和margin

    优点:兼容性好,是最常用的一种设置水平、垂直居中的方案
    缺点:需要知道元素宽高
    设置父元素为:

position: relative; //非static就行

设置子元素(假设宽高分别为500px,600px)的top和bottom:

position: relative;
top: 50%;
height: 50%;
margin-top: -300px; // 1/2的子元素高度
margin-left: -250px; // 1/2的子元素宽度
  • 2.2.3 未知宽高的元素居中,使用absolute和transform

优点:不需要知道元素高度、宽度就可以设置居中
缺点:由于transform属性是css3属性,IE9以下无法使用

父元素:

position: relative; //非static就行

子元素

position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
  • 2.2.4 绝对定位居中(Absolute Centering)

实现原理请参考freshlover的专栏

优点:支持跨浏览器,包括IE8-IE10;
缺点:必须声明高度(查看可变高度Variable Height);在Windows Phone设备上不起作用。

.Absolute-Center {  
  margin: auto;  
  position: absolute;  
  top: 0; left: 0; bottom: 0; right: 0;  
}  
  • 2.2.5 行内块元素

优点: 高度可变、内容溢出会将父元素撑开、 支持跨浏览器,也适应于IE7。

缺点:需要一个容器、水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整、内容块宽度不能超过容器的100% - 0.25em。

父元素:

text-align: center;  
overflow: auto;  

子元素:

display: inline-block;  
vertical-align: middle;  

伪元素:

content: '';  
height: 100%;  
margin-left: -0.25em; /* To offset spacing. May vary by font */  

基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7550次
    • 积分:128
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类