袁来如此的工作笔记
袁来如此的工作笔记
竹杖芒鞋轻胜马,谁怕? 一蓑烟雨任平生。

CSS实现垂直居中水平居中的绝对定位居中技术

浏览量:754

方法一【绝对定位居中】

        margin: auto;  

        position: absolute;  

        top: 0; left: 0; bottom: 0; right: 0; 

        position: fixed;

        z-index: 999;

        width: 60%;   

        height: 60%;  

        min-width: 200px;  

        max-width: 400px;  

        padding: 40px; 

        overflow: auto;


优点:

1.支持跨浏览器,包括IE8-IE10.

2.无需其他特殊标记,CSS代码量少

3.支持百分比%属性值和min-/max-属性

4.只用这一个类可实现任何内容块居中

5.不论是否设置padding都可居中(在不使用box-sizing属性的前提下)

6.内容块可以被重绘。

7.完美支持图片居中。


缺点:

1.必须声明高度(查看可变高度Variable Height)。

2.建议设置overflow:auto来防止内容越界溢出。(查看溢出Overflow)。

3.在Windows Phone设备上不起作用。



方法二【负外边距】

        width: 300px;  

        height: 200px;  

        padding: 20px;  

        position: absolute;  

        top: 50%; left: 50%;  

        margin-left: -170px;  

        margin-top: -120px;  

优点:

1.良好的跨浏览器特性,兼容IE6-IE7。

2.代码量少。


缺点:

1.不能自适应。不支持百分比尺寸和min-/max-属性设置。

2.内容可能溢出容器。

3.边距大小与padding,和是否定义box-sizing: border-box有关,计算需要根据不同情况。


打赏