您的位置:新葡亰496net > 新葡亰官网 > 如何只用CSS做到完全居中,实现垂直居中水平居

如何只用CSS做到完全居中,实现垂直居中水平居

发布时间:2019-09-17 06:23编辑:新葡亰官网浏览(106)

    如何只用CSS做到完全居中

    2013/10/11 · CSS · 11 评论 · CSS, 居中

    本文由 伯乐在线 - 埃姆杰 翻译。未经许可,禁止转载!
    英文出处:codepen.io。欢迎加入翻译组。

    【感谢@埃姆杰 的热心翻译。如果其他朋友也有不错的原创或译文,可以尝试提交到伯乐头条。】

    我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在。但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式,就可以做到:

    CSS

    .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

    1
    2
    3
    4
    5
    .Absolute-Center {
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

    我并不是第一个发现这种方法的人(不过我还是敢把它叫做“完全居中”),它有可能是种非常普遍的技巧。但大多数介绍垂直居中的文章中并没有提到过这种方法。如果不是浏览这篇文章的评论,我甚至根本就不会发现这个办法。

    上面那篇文章的评论栏中,Simon提供了一个jsFiddle的链接,其他的方法相比之下就相形见绌了。(Priit也在评论栏中提到了同样的方法)。深入研究了一番之后,我又用某些关键词找到了记载这种方法的三个网站:站点一、站点二、站点三。

    以前从未用过这种方法的我想试试,看看这种”完全居中”的方法到底有多么神奇。 好处:

    • 跨浏览器,兼容性好(无需hack,可兼顾IE8~IE10)
    • 无特殊标记,样式更精简
    • 自适应布局,可以使用百分比和最大最小高宽等样式
    • 居中时不考虑元素的padding值(也不需要使用box-sizing样式)
    • 布局块可以自由调节大小
    • img的图像也可以使用

    同时注意:

    • 必须声明元素高度
    • 推荐设置overflow:auto;样式避免元素溢出,显示不正常的问题
    • 这种方法在Windows Phone上不起作用

    浏览器支持:Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中,甚至也可以运行在IE8~IE10上

     

     

     

    来自

    翻译 2013年09月11日 21:06:11

    • 标签:
    • 绝对居中 /
    • 垂直居中 /
    • 水平居中 /
    • CSS居中代码

     

    图片 1

     

    来自

    翻译 2013年09月11日 21:06:11

    • 标签:
    • 绝对居中 /
    • 垂直居中 /
    • 水平居中 /
    • CSS居中代码

     

    图片 2

     

    对照表

    “完全居中”并不是本篇文章中唯一的选项。要做到垂直居中,还存在着其他方法,各有各的长处。采取什么样的方法,取决于你所支持的浏览器,以及现有标签的结构。下面这张对照表能够帮你选出最符合你需要的方法。

    所用样式

    支持的浏览器

    是否 响应式

    内容溢出后的样式

    resize:both

    高度可变

    主要缺陷

    Absolute

    现代浏览器&IE8

    会导致容器溢出

    是*

    ‘可变高度’的特性不能跨浏览器

    负margin值

    所有

    带滚动条

    大小改变后不再居中

    不具有响应式特性,margin值必须经过手工计算

    Transform

    现代浏览器&IE9

    会导致容器溢出

    妨碍渲染

    Table-Cell

    现代浏览器&IE8

    撑开容器

    会加上多余的标记

    Inline-Block

    现代浏览器&IE8 &IE7*

    撑开容器

    需要使用容器包裹和hack式的样式

    Flexbox

    现代浏览器&IE10

    会导致容器溢出

    需要使用容器包裹和厂商前缀(vendor prefix)

    转自博客

     

    转自博客

     

    Ⅰ.绝对定位居中(Absolute Centering)技术

     

    我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:

    [css] view plain copy

     

    1. .Absolute-Center {  
    2.   margin: auto;  
    3.   position: absolute;  
    4.   top: 0; left: 0; bottom: 0; right: 0;  
    5. }  

    我不是这种实现方法的第一人,可能这只是非常常见的一种小技术,我斗胆将其命名为绝对居中(Absolute Centering),虽然如此,但是大多数讨论垂直居中的文章却从来不提这种方法,直到我最近浏览《How to Center Anything WithCSS》这篇文章的评论时候才发现这种用法。在评论列表中Simon和Priit都提及了此方法。

    如果你有任何扩展的功能或建议,可以在此跟帖:

    CodePen

    SmashingMagazine

    Twitter @shshaw

    优点:

    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设备上不起作用。

    浏览器兼容性:

    Chrome,Firefox, Safari, Mobile Safari, IE8-10.

    绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。

    对比表格:

    绝对居中法并不是唯一的实现方法,实现垂直居中还有些其他的方法,并各有各的优势。采用哪种技术取决于你的浏览器是否支持和你使用的语言标记。这个对照表有助于你根据自己的需求做出正确的选择。

     

    Technique

    Browser Support

    Responsive

    Overflow

    resize:both

    Variable Height

    Major Caveats

    Absolute Centering

    Modern & IE8

    Yes

    Scroll, can overflow container

    Yes

    Yes*

    Variable Height not perfect cross-browser

    Negative Margins

    All

    No

    Scroll

    Resizes but doesn't stay centered

    No

    Not responsive, margins must be calculated manually

    Transforms

    Modern & IE9

    Yes

    Scroll, can overflow container

    Yes

    Yes

    Blurry rendering

    Table-Cell

    Modern & IE8

    Yes

    Expands container

    No

    Yes

    如何只用CSS做到完全居中,实现垂直居中水平居中的几种方式。Extra markup

    Inline-Block

    Modern, IE8 & IE7*

    Yes

    Expands container

    No

    Yes

    Requires container, hacky styles

    Flexbox

    Modern & IE10

    Yes

    Scroll, can overflow container

    Yes

    Yes

    Requires container, vendor prefixes

     

    解释

    通过以上描述,绝对居中(AbsoluteCentering)的工作机理可以阐述如下:

    1、在普通内容流(normal content flow)中,margin:auto的效果等同于margin-top:0;margin-bottom:0。

    W3C中写道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

    2、position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时绝对定位部分不进行渲染。

    Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space

    3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块block将填充其父元素的所有可用空间,父元素一般为body或者声明为position:relative;的容器。

    Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).

    4、  给内容块设置一个高度height或宽度width,能够防止内容块占据所有的可用空间,促使浏览器根据新的边界框重新计算margin:auto

    Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.

    5、由于内容块被绝对定位,脱离了正常的内容流,浏览器会给margin-top,margin-bottom相同的值,使元素块在先前定义的边界内居中。

    W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

    这么看来, margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的,所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。

    简而言之(TL;DR):绝对定位元素不在普通内容流中渲染,因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

    居中方式:

     

    Ⅰ.绝对定位居中(Absolute Centering)技术

     

    我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:

    [css] view plain copy

     

    1. .Absolute-Center {  
    2.   margin: auto;  
    3.   position: absolute;  
    4.   top: 0; left: 0; bottom: 0; right: 0;  
    5. }  

    我不是这种实现方法的第一人,可能这只是非常常见的一种小技术,我斗胆将其命名为绝对居中(Absolute Centering),虽然如此,但是大多数讨论垂直居中的文章却从来不提这种方法,直到我最近浏览《How to Center Anything WithCSS》这篇文章的评论时候才发现这种用法。在评论列表中Simon和Priit都提及了此方法。

    如果你有任何扩展的功能或建议,可以在此跟帖:

    CodePen

    SmashingMagazine

    Twitter @shshaw

    优点:

    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设备上不起作用。

    浏览器兼容性:

    Chrome,Firefox, Safari, Mobile Safari, IE8-10.

    绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。

    对比表格:

    绝对居中法并不是唯一的实现方法,实现垂直居中还有些其他的方法,并各有各的优势。采用哪种技术取决于你的浏览器是否支持和你使用的语言标记。这个对照表有助于你根据自己的需求做出正确的选择。

     

    Technique

    Browser Support

    Responsive

    Overflow

    resize:both

    Variable Height

    Major Caveats

    Absolute Centering

    Modern & IE8

    Yes

    Scroll, can overflow container

    Yes

    Yes*

    Variable Height not perfect cross-browser

    Negative Margins

    All

    No

    Scroll

    Resizes but doesn't stay centered

    No

    Not responsive, margins must be calculated manually

    Transforms

    Modern & IE9

    Yes

    Scroll, can overflow container

    Yes

    Yes

    Blurry rendering

    Table-Cell

    Modern & IE8

    Yes

    Expands container

    No

    Yes

    Extra markup

    Inline-Block

    Modern, IE8 & IE7*

    Yes

    Expands container

    No

    Yes

    Requires container, hacky styles

    Flexbox

    Modern & IE10

    Yes

    Scroll, can overflow container

    Yes

    Yes

    Requires container, vendor prefixes

     

    解释

    通过以上描述,绝对居中(AbsoluteCentering)的工作机理可以阐述如下:

    1、在普通内容流(normal content flow)中,margin:auto的效果等同于margin-top:0;margin-bottom:0。

    W3C中写道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

    2、position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时绝对定位部分不进行渲染。

    Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space

    3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块block将填充其父元素的所有可用空间,父元素一般为body或者声明为position:relative;的容器。

    Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).

    4、  给内容块设置一个高度height或宽度width,能够防止内容块占据所有的可用空间,促使浏览器根据新的边界框重新计算margin:auto

    Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.

    5、由于内容块被绝对定位,脱离了正常的内容流,浏览器会给margin-top,margin-bottom相同的值,使元素块在先前定义的边界内居中。

    W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

    这么看来, margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的,所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。

    简而言之(TL;DR):绝对定位元素不在普通内容流中渲染,因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

    居中方式:

     

    说明

    在研究了规范和文档后,我总结出了“完全居中”的工作原理:

    1. 在普通文档流里,margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。

    W3.org:?If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.

    1. 设置了position: absolute; 的元素会变成块元素,并脱离普通文档流。而文档的其余部分照常渲染,元素像是不在原来的位置一样。 Developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space

    2. 设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子,因此这个元素会填满它相对父元素的内部空间,这个相对父元素可以是是body标签,或者是一个设置了position: relative; 样式的容器。 Developer.mozilla.org:?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).

    3. 给元素设置了宽高以后,浏览器会阻止元素填满所有的空间,根据margin: auto; 的要求,重新计算,并包裹一层新的盒子。 Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.

    5. 既然块元素是绝对定位的,又脱离了普通文档流,因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。 W3.org:?If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically

    使用“完全居中”,有意遵照了标准margin: auto; 样式渲染的规定,所以应当在与标准兼容的各种浏览器中起作用。

     

    居中方式:

     

    居中方式:

     

    一、容器内(Within Container)

     

    内容块的父容器设置为position:relative,使用上述绝对居中方式,可以使内容居中显示于父容器。

    [css] view plain copy

     

    1. .Center-Container {  
    2.   position: relative;  
    3. }  
    4.   
    5. .Absolute-Center {  
    6.   width: 50%;  
    7.   height: 50%;  
    8.   overflow: auto;  
    9.   margin: auto;  
    10.   position: absolute;  
    11.   top: 0; left: 0; bottom: 0; right: 0;  
    12. }  

     

    图片 3

    以下其余的demo默认上面的CSS样式已引用包括进去,在此基础上只提供额外的类供用户追加以实现不同的功能。

     

    一、容器内(Within Container)

     

    内容块的父容器设置为position:relative,使用上述绝对居中方式,可以使内容居中显示于父容器。

    [css] view plain copy

     

    1. .Center-Container {  
    2.   position: relative;  
    3. }  
    4.   
    5. .Absolute-Center {  
    6.   width: 50%;  
    7.   height: 50%;  
    8.   overflow: auto;  
    9.   margin: auto;  
    10.   position: absolute;  
    11.   top: 0; left: 0; bottom: 0; right: 0;  
    12. }  

     

    图片 4

    以下其余的demo默认上面的CSS样式已引用包括进去,在此基础上只提供额外的类供用户追加以实现不同的功能。

     

    对齐

    一、容器内(Within Container)

     

    内容块的父容器设置为position:relative,使用上述绝对居中方式,可以使内容居中显示于父容器。

    [css] view plain copy

     

    1. .Center-Container {  
    2.   position: relative;  
    3. }  
    4.   
    5. .Absolute-Center {  
    6.   width: 50%;  
    7.   height: 50%;  
    8.   overflow: auto;  
    9.   margin: auto;  
    10.   position: absolute;  
    11.   top: 0; left: 0; bottom: 0; right: 0;  
    12. }  

     

    图片 5

    一、容器内(Within Container)

     

    内容块的父容器设置为position:relative,使用上述绝对居中方式,可以使内容居中显示于父容器。

    [css] view plain copy

     

    1. .Center-Container {  
    2.   position: relative;  
    3. }  
    4.   
    5. .Absolute-Center {  
    6.   width: 50%;  
    7.   height: 50%;  
    8.   overflow: auto;  
    9.   margin: auto;  
    10.   position: absolute;  
    11.   top: 0; left: 0; bottom: 0; right: 0;  
    12. }  

     

    图片 6

    二、视区内(Within Viewport)

     

    想让内容块一直停留在可视区域内?将内容块设置为position:fixed;并设置一个较大的z-index层叠属性值。

    [css] view plain copy

     

    1. .Absolute-Center.is-Fixed {  
    2.   position: fixed;  
    3.   z-index: 999;  
    4. }  

     

    图片 7

    注意:对MobileSafari,若内容块不是放在设置为position:relative;的父容器中,内容块将垂直居中于整个文档,而不是可视区域内垂直居中。

     

    二、视区内(Within Viewport)

     

    想让内容块一直停留在可视区域内?将内容块设置为position:fixed;并设置一个较大的z-index层叠属性值。

    [css] view plain copy

     

    1. .Absolute-Center.is-Fixed {  
    2.   position: fixed;  
    3.   z-index: 999;  
    4. }  

     

    图片 8

    注意:对MobileSafari,若内容块不是放在设置为position:relative;的父容器中,内容块将垂直居中于整个文档,而不是可视区域内垂直居中。

     

    容器内对齐

    使用“完全居中”,就可以在一个设置了position: relative的容器中做到完全居中元素了! (居中例子,请前往英文原文查看)

    CSS

    .Center-Container { position: relative; } .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .Center-Container {
      position: relative;
    }
     
    .Absolute-Center {
      width: 50%;
      height: 50%;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

    图片 9

    接下来的示例会假设已经包含了以下样式,并且以逐步添加样式的方式提供不同的特性。

     

    以下其余的demo默认上面的CSS样式已引用包括进去,在此基础上只提供额外的类供用户追加以实现不同的功能。

     

    以下其余的demo默认上面的CSS样式已引用包括进去,在此基础上只提供额外的类供用户追加以实现不同的功能。

     

    三、边栏 (Offsets)

     

    如果你要设置一个固顶的头或增加其他的边栏,只需要在内容块的样式中加入像这样的CSS样式代码:top:70px;bottom:auto;由于已经声明了margin:auto;,该内容块将会垂直居中于你通过top,left,bottom和right属性定义的边界框内。

    你可以将内容块固定与屏幕的左侧或右侧,并且保持内容块垂直居中。使用right:0;left:auto;固定于屏幕右侧,使用left:0;right:auto;固定与屏幕左侧。

    [css] view plain copy

     

    1. .Absolute-Center.is-Right {  
    2.   left: auto; right: 20px;  
    3.   text-align: right;  
    4. }  
    5.   
    6. .Absolute-Center.is-Left {  
    7.   right: auto; left: 20px;  
    8.   text-align: left;  
    9. }  

    图片 10

     

    三、边栏 (Offsets)

     

    如果你要设置一个固顶的头或增加其他的边栏,只需要在内容块的样式中加入像这样的CSS样式代码:top:70px;bottom:auto;由于已经声明了margin:auto;,该内容块将会垂直居中于你通过top,left,bottom和right属性定义的边界框内。

    你可以将内容块固定与屏幕的左侧或右侧,并且保持内容块垂直居中。使用right:0;left:auto;固定于屏幕右侧,使用left:0;right:auto;固定与屏幕左侧。

    [css] view plain copy

     

    1. .Absolute-Center.is-Right {  
    2.   left: auto; right: 20px;  
    3.   text-align: right;  
    4. }  
    5.   
    6. .Absolute-Center.is-Left {  
    7.   right: auto; left: 20px;  
    8.   text-align: left;  
    9. }  

    图片 11

     

    在可视区域内居中

    想要使内容区在可视区域内居中么?设置position: fixed样式,并设置一个较高的z-index值,就可以做到。

    CSS

    .Absolute-Center.is-Fixed { position: fixed; z-index: 999; }

    1
    2
    3
    4
    .Absolute-Center.is-Fixed {
      position: fixed;
      z-index: 999;
    }

    图片 12

    移动版Safari的说明:如果外面没有一层设置position: relative的容器,内容区会以整个文档的高度的中心点为基准居中,而不是以可视区域的高度中心点为基准居中。

     

    二、视区内(Within Viewport)

     

    想让内容块一直停留在可视区域内?将内容块设置为position:fixed;并设置一个较大的z-index层叠属性值。

    [css] view plain copy

     

    1. .Absolute-Center.is-Fixed {  
    2.   position: fixed;  
    3.   z-index: 999;  
    4. }  

     

    图片 13

    注意:对MobileSafari,若内容块不是放在设置为position:relative;的父容器中,内容块将垂直居中于整个文档,而不是可视区域内垂直居中。

    二、视区内(Within Viewport)

     

    想让内容块一直停留在可视区域内?将内容块设置为position:fixed;并设置一个较大的z-index层叠属性值。

    [css] view plain copy

     

    1. .Absolute-Center.is-Fixed {  
    2.   position: fixed;  
    3.   z-index: 999;  
    4. }  

     

    图片 14

    注意:对MobileSafari,若内容块不是放在设置为position:relative;的父容器中,内容块将垂直居中于整个文档,而不是可视区域内垂直居中。

    四、响应式/自适应(Responsive)

     

    绝对居中最大的优势应该就是对百分比形式的宽高支持的非常完美。甚至min-width/max-width 和min-height/max-height这些属性在自适应盒子内的表现也和预期很一致。

    图片 15

    [css] view plain copy

     

    1. .Absolute-Center.is-Responsive {  
    2.   width: 60%;   
    3.   height: 60%;  
    4.   min-width: 200px;  
    5.   max-width: 400px;  
    6.   padding: 40px;  
    7. }  

    给内容块元素加上padding也不影响内容块元素的绝对居中实现。

    四、响应式/自适应(Responsive)

     

    绝对居中最大的优势应该就是对百分比形式的宽高支持的非常完美。甚至min-width/max-width 和min-height/max-height这些属性在自适应盒子内的表现也和预期很一致。

    图片 16

    [css] view plain copy

     

    1. .Absolute-Center.is-Responsive {  
    2.   width: 60%;   
    3.   height: 60%;  
    4.   min-width: 200px;  
    5.   max-width: 400px;  
    6.   padding: 40px;  
    7. }  

    给内容块元素加上padding也不影响内容块元素的绝对居中实现。

    偏移值

    如果需要添加固定的标题,或者其他带偏移样式的元素,可以直接把类似top: 70px; 的样式写进内容区域的样式中。一旦声明了margin: auto; 的样式,内容块的top ``left ``bottom ``right的属性值也会同时计算进去。

    如果想让内容块在贴近侧边的过程中保持水平居中,可以使用right: 0; left: auto; 让内容贴在右侧,或者使用left: 0; right: auto; 使内容贴在左侧。

    CSS

    .Absolute-Center.is-Fixed { position: fixed; z-index: 999; }

    1
    2
    3
    4
    .Absolute-Center.is-Fixed {
      position: fixed;
      z-index: 999;
    }

    图片 17

     

    三、边栏 (Offsets)

     

    如果你要设置一个固顶的头或增加其他的边栏,只需要在内容块的样式中加入像这样的CSS样式代码:top:70px;bottom:auto;由于已经声明了margin:auto;,该内容块将会垂直居中于你通过top,left,bottom和right属性定义的边界框内。

    你可以将内容块固定与屏幕的左侧或右侧,并且保持内容块垂直居中。使用right:0;left:auto;固定于屏幕右侧,使用left:0;right:auto;固定与屏幕左侧。

    [css] view plain copy

     

    1. .Absolute-Center.is-Right {  
    2.   left: auto; right: 20px;  
    3.   text-align: right;  
    4. }  
    5.   
    6. .Absolute-Center.is-Left {  
    7.   right: auto; left: 20px;  
    8.   text-align: left;  
    9. }  

    三、边栏 (Offsets)

     

    如果你要设置一个固顶的头或增加其他的边栏,只需要在内容块的样式中加入像这样的CSS样式代码:top:70px;bottom:auto;由于已经声明了margin:auto;,该内容块将会垂直居中于你通过top,left,bottom和right属性定义的边界框内。

    你可以将内容块固定与屏幕的左侧或右侧,并且保持内容块垂直居中。使用right:0;left:auto;固定于屏幕右侧,使用left:0;right:auto;固定与屏幕左侧。

    [css] view plain copy

     

    1. .Absolute-Center.is-Right {  
    2.   left: auto; right: 20px;  
    3.   text-align: right;  
    4. }  
    5.   
    6. .Absolute-Center.is-Left {  
    7.   right: auto; left: 20px;  
    8.   text-align: left;  
    9. }  

    五、 溢出情况(Overflow)

    内容高度大于块元素或容器(视区viewport或设为position:relative的父容器)会溢出,这时内容可能会显示到块与容器的外面,或者被截断出现显示不全(分别对应内容块overflow属性设置为visible和hidden的表现)。

    加上overflow: auto会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界。

    [css] view plain copy

     

    1. .Absolute-Center.is-Overflow {  
    2.   overflow: auto;  
    3. }  

    图片 18

    如果内容块自身不设置任何padding的话,可以设置max-height: 100%;来保证内容高度不超越容器高度。

    五、 溢出情况(Overflow)

    内容高度大于块元素或容器(视区viewport或设为position:relative的父容器)会溢出,这时内容可能会显示到块与容器的外面,或者被截断出现显示不全(分别对应内容块overflow属性设置为visible和hidden的表现)。

    加上overflow: auto会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界。

    [css] view plain copy

     

    1. .Absolute-Center.is-Overflow {  
    2.   overflow: auto;  
    3. }  

    图片 19

    如果内容块自身不设置任何padding的话,可以设置max-height: 100%;来保证内容高度不超越容器高度。

    带响应式

    使用absolute的最大好处就是可以完美地使用带百分比的宽高样式!就算是min-width/max-width或者min-height/max-height也能够有如预期般的表现。

    再进一步加上padding样式的话,absolute式的完全居中也丝毫不会破坏!

    CSS

    .Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 200px; max-width: 400px; padding: 40px; }

    1
    2
    3
    4
    5
    6
    7
    .Absolute-Center.is-Responsive {
      width: 60%;
      height: 60%;
      min-width: 200px;
      max-width: 400px;
      padding: 40px;
    }

    图片 20

     

     

    图片 21

     

    图片 22

    六、重绘(Resizing)

    你可以使用其他class类或javascript代码来重绘内容块同时保证居中,无须手动重新计算中心尺寸。当然,你也可以添加resize属性来让用户拖拽实现内容块的重绘。

    绝对居中(Absolute Centering)可以保证内容块始终居中,无论内容块是否重绘。可以通过设置min-/max-来根据自己需要限制内容块的大小,并防止内容溢出窗口/容器。

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Resizable {  
    2.   min-width: 20%;  
    3.   max-width: 80%;  
    4.   min-height: 20%;  
    5.   max-height: 80%;  
    6.   resize: both;  
    7.   overflow: auto;  
    8. }  

    图片 23

     

    如果不使用resize:both属性,可以使用CSS3动画属性transition来实现重绘的窗口之间平滑的过渡。一定要设置overflow:auto;以防重绘的内容块尺寸小于内容的实际尺寸这种情况出现。

    绝对居中(AbsoluteCentering)是唯一支持resize:both属性实现垂直居中的技术。

    注意:

    1. 要设置max-width/max-height属性来弥补内容块padding,否则可能溢出。
    2. 手机浏览器和IE8-IE10浏览器不支持resize属性,所以如果对你来说,这部分用户体验很必要,务必保证对resizing你的用户有可行的退路。
    3. 联合使用resize 和 transition属性会在用户重绘时,产生一个transition动画延迟时间。

     

    六、重绘(Resizing)

    你可以使用其他class类或javascript代码来重绘内容块同时保证居中,无须手动重新计算中心尺寸。当然,你也可以添加resize属性来让用户拖拽实现内容块的重绘。

    绝对居中(Absolute Centering)可以保证内容块始终居中,无论内容块是否重绘。可以通过设置min-/max-来根据自己需要限制内容块的大小,并防止内容溢出窗口/容器。

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Resizable {  
    2.   min-width: 20%;  
    3.   max-width: 80%;  
    4.   min-height: 20%;  
    5.   max-height: 80%;  
    6.   resize: both;  
    7.   overflow: auto;  
    8. }  

    图片 24

     

    如果不使用resize:both属性,可以使用CSS3动画属性transition来实现重绘的窗口之间平滑的过渡。一定要设置overflow:auto;以防重绘的内容块尺寸小于内容的实际尺寸这种情况出现。

    绝对居中(AbsoluteCentering)是唯一支持resize:both属性实现垂直居中的技术。

    注意:

    1. 要设置max-width/max-height属性来弥补内容块padding,否则可能溢出。
    2. 手机浏览器和IE8-IE10浏览器不支持resize属性,所以如果对你来说,这部分用户体验很必要,务必保证对resizing你的用户有可行的退路。
    3. 联合使用resize 和 transition属性会在用户重绘时,产生一个transition动画延迟时间。

     

    带溢出内容

    内容区高度大于可视区域或者一个position: relative的容器,其内容可能会溢出容器,或被容器截断。只要内容区域没有超出容器(没有给内容容器预留padding的话,可以设置max-height: 100%;的样式),那么容器内就会产生滚动条。

    CSS

    .Absolute-Center.is-Overflow { overflow: auto; }

    1
    2
    3
    .Absolute-Center.is-Overflow {
      overflow: auto;
    }

    图片 25

     

    四、响应式/自适应(Responsive)

     

    绝对居中最大的优势应该就是对百分比形式的宽高支持的非常完美。甚至min-width/max-width 和min-height/max-height这些属性在自适应盒子内的表现也和预期很一致。

    图片 26

    [css] view plain copy

     

    1. .Absolute-Center.is-Responsive {  
    2.   width: 60%;   
    3.   height: 60%;  
    4.   min-width: 200px;  
    5.   max-width: 400px;  
    6.   padding: 40px;  
    7. }  

    四、响应式/自适应(Responsive)

     

    绝对居中最大的优势应该就是对百分比形式的宽高支持的非常完美。甚至min-width/max-width 和min-height/max-height这些属性在自适应盒子内的表现也和预期很一致。

    图片 27

    [css] view plain copy

     

    1. .Absolute-Center.is-Responsive {  
    2.   width: 60%;   
    3.   height: 60%;  
    4.   min-width: 200px;  
    5.   max-width: 400px;  
    6.   padding: 40px;  
    7. }  

    七、图片(Images)

     

    绝对居中(AbsoluteCentering)也适用于图片。对图片自身应用class类或CSS样式,并给图片添加height:auto样式,图片会自适应居中显示,如果外层容器可以resize则随着容器的重绘,图片也相应重绘,始终保持居中。

    需要注意的是height:auto虽然对图片居中有用,但如果是在图片外层的内容块上应用了height:auto则会产生一些问题:规则的内容块会被拉伸填充整个容器。这时,我们可以使用可变高度(Variable Height)方式解决这个问题。问题的原因可能是渲染图片时要计算图片高度,这就如同你自己定义了图片高度一样,浏览器得到了图片高度就不会像其他情况一样去解析margin:auto垂直居中了。所以我们最好对图片自身应用这些样式而不是父元素。

    图片 28

     

    HTML:

    [html] view plain copy

     

    1. <img src="" class="Absolute-Center is-Image" alt="" />  

    CSS:

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Image {  
    2.   height: auto;  
    3. }  
    4.   
    5. .Absolute-Center.is-Image img {   
    6.   width: 100%;  
    7.   height: auto;  
    8. }  

    最好是对图片自身应用此方法,效果如下图:

    图片 29

     

     

    七、图片(Images)

     

    绝对居中(AbsoluteCentering)也适用于图片。对图片自身应用class类或CSS样式,并给图片添加height:auto样式,图片会自适应居中显示,如果外层容器可以resize则随着容器的重绘,图片也相应重绘,始终保持居中。

    需要注意的是height:auto虽然对图片居中有用,但如果是在图片外层的内容块上应用了height:auto则会产生一些问题:规则的内容块会被拉伸填充整个容器。这时,我们可以使用可变高度(Variable Height)方式解决这个问题。问题的原因可能是渲染图片时要计算图片高度,这就如同你自己定义了图片高度一样,浏览器得到了图片高度就不会像其他情况一样去解析margin:auto垂直居中了。所以我们最好对图片自身应用这些样式而不是父元素。

    图片 30

     

    HTML:

    [html] view plain copy

     

    1. <img src="" class="Absolute-Center is-Image" alt="" />  

    CSS:

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Image {  
    2.   height: auto;  
    3. }  
    4.   
    5. .Absolute-Center.is-Image img {   
    6.   width: 100%;  
    7.   height: auto;  
    8. }  

    最好是对图片自身应用此方法,效果如下图:

    图片 31

     

     

    大小可调整

    使用其他样式,或者使用JavaScript调整内容区的大小,也是不用手动重新计算的!如果设置了resize的样式,甚至可以让用户自行调节内容区域的大小。 “完全居中”法,无论内容区怎么改变大小,都会保持居中。

    设置了min-/max- 开头的属性可以限制区块的大小而不用担心撑开容器。

    CSS

    .Absolute-Center.is-Resizable { min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both; overflow: auto; }

    1
    2
    3
    4
    5
    6
    7
    8
    .Absolute-Center.is-Resizable {
      min-width: 20%;
      max-width: 80%;
      min-height: 20%;
      max-height: 80%;
      resize: both;
      overflow: auto;
    }

    图片 32

    如果不设置resize: both的样式,可以设置transition样式平滑地在大小间切换。一定要记得设置overflow: auto样式,因为改变大小后的容器高宽很有可能会小于内容的高宽。 “完全居中”法是唯一一种能支持使用resize: both样式的方法。

    使用注意:

    • 需要设置max-width/max-height给内容区域留足够的空间,不然就有可能使容器溢出。
    • resize属性不支持移动版浏览器和IE8-10,如果用户体验很重要的话,请确保用户可以有其他替代方法来改变大小。
    • 同时使用resize样式和transition会使用户在开始改变大小时产生等于transition效果时间等长的延时。

     

     

    给内容块元素加上padding也不影响内容块元素的绝对居中实现。

     

    给内容块元素加上padding也不影响内容块元素的绝对居中实现。

    八、可变高度(Variable Height)

     

    这种情况下实现绝对居中(AbsoluteCentering)必须要声明一个高度,不管你是基于百分比的高度还是通过max-height控制的高度,还有,别忘了设置合适的overflow属性。对自适应/响应式情景,这种方法很不错。

    与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高,内容块都会保持居中。这种方法在一些浏览器(如IE/FireFox)上会有问题,我的搭档Kalley 

    在ELL Creative(访问ellcreative.com )上写了一个基于Modernizr插件的检测函数,用来检测浏览器是否支持这种居中方法,进一步增强用户体验。

    Javascript:

     

    [javascript] view plain copy

     

    1. /* Modernizr Test for Variable Height Content */  
    2. Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {  
    3.   Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);  
    4. });  

    CSS:

     

     

    [css] view plain copy

     

    1. .absolutecentercontent .Absolute-Center.is-Variable {  
    2.   display: table;  
    3.   height: auto;  
    4. }  

    图片 33

     

    缺点:

    浏览器兼容性不太好,若Modernizr不能满足你的需求,你需要寻找其他方法解决。

    1.      与上述重绘(Resizing)情况的方法不兼容

    如何只用CSS做到完全居中,实现垂直居中水平居中的几种方式。2.      Firefox/IE8:使用display:table会使内容块垂直居上,不过水平还是居中的。

    3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

    4.      Mobile Safari:内容块垂直居中;若使用百分比宽度,水平方向居中会稍微偏离中心位置。

     

     

    八、可变高度(Variable Height)

     

    这种情况下实现绝对居中(AbsoluteCentering)必须要声明一个高度,不管你是基于百分比的高度还是通过max-height控制的高度,还有,别忘了设置合适的overflow属性。对自适应/响应式情景,这种方法很不错。

    与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高,内容块都会保持居中。这种方法在一些浏览器(如IE/FireFox)上会有问题,我的搭档Kalley 

    在ELL Creative(访问ellcreative.com )上写了一个基于Modernizr插件的检测函数,用来检测浏览器是否支持这种居中方法,进一步增强用户体验。

    Javascript:

     

    [javascript] view plain copy

     

    1. /* Modernizr Test for Variable Height Content */  
    2. Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {  
    3.   Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);  
    4. });  

    CSS:

     

     

    [css] view plain copy

     

    1. .absolutecentercontent .Absolute-Center.is-Variable {  
    2.   display: table;  
    3.   height: auto;  
    4. }  

    图片 34

     

    缺点:

    浏览器兼容性不太好,若Modernizr不能满足你的需求,你需要寻找其他方法解决。

    1.      与上述重绘(Resizing)情况的方法不兼容

    2.      Firefox/IE8:使用display:table会使内容块垂直居上,不过水平还是居中的。

    3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

    4.      Mobile Safari:内容块垂直居中;若使用百分比宽度,水平方向居中会稍微偏离中心位置。

     

     

    图像

    图像也同样有效!提供相应的class,并指定样式 height: auto; ,就得到了一张随着容器改变大小的响应式图片。

    图片 35

    请注意,height: auto; 样式虽然对图片有效,如果没有用到了后面介绍的‘可变高技巧’,则会导致普通内容区域伸长以适应容器长度。

    浏览器很有可能是根据渲染结果填充了图像高度值,所以在测试过的浏览器中,margin: auto; 样式就像是声明了固定的高度值一般正常工作。

    HTML:

    XHTML

    <img src="" alt="" />

    1
    <img src="http://placekitten.com/g/500/200" alt="" />

    CSS:

    CSS

    .Absolute-Center.is-Image { height: auto; } .Absolute-Center.is-Image img { width: 100%; height: auto; }

    1
    2
    3
    4
    5
    6
    7
    8
    .Absolute-Center.is-Image {
      height: auto;
    }
     
    .Absolute-Center.is-Image img {
      width: 100%;
      height: auto;
    }

     

    五、 溢出情况(Overflow)

    内容高度大于块元素或容器(视区viewport或设为position:relative的父容器)会溢出,这时内容可能会显示到块与容器的外面,或者被截断出现显示不全(分别对应内容块overflow属性设置为visible和hidden的表现)。

    五、 溢出情况(Overflow)

    内容高度大于块元素或容器(视区viewport或设为position:relative的父容器)会溢出,这时内容可能会显示到块与容器的外面,或者被截断出现显示不全(分别对应内容块overflow属性设置为visible和hidden的表现)。

    Ⅱ.其他居中实现技术

     

    绝对居中(Absolute Centering)是一种非常不错的技术,除此之外还有一些方法可以满足更多的具体需求,最常见的推荐:NegativeMargins, Transforms,Table-Cell, Inline-Block方式和新出现的Flexbox.方式。这些方法许多文章都有深入讲解,这里只做简单阐述。

     

    Ⅱ.其他居中实现技术

     

    绝对居中(Absolute Centering)是一种非常不错的技术,除此之外还有一些方法可以满足更多的具体需求,最常见的推荐:NegativeMargins, Transforms,Table-Cell, Inline-Block方式和新出现的Flexbox.方式。这些方法许多文章都有深入讲解,这里只做简单阐述。

     

    可变高度

    “完全居中”法的确需要声明容器高度,但是高度受max-height样式的影响,也可以是百分比。这非常适合响应式的方案,只需要设置好带溢出内容就行。

    图片 36

    另一种替代方案是设置display: table样式居中,,不管内容的长度。这种方法会在一些浏览器中产生问题(主要是IE和Firefox)。我在ELL Creative的朋友Kalley写了一个基于Modernizr 的测试,可以用来检查浏览器是否支持这种居中方案。现在这种方法可以做到渐进增强。

    注意要点: 这种方法会破坏浏览器兼容性,如果Modernizr测试不能满足你的需求,你可能需要考虑其他的实现方案。

    • 与大小可调整技术是不兼容的
    • Firefox/IE8中使用display: table,内容区在垂直方向靠上,水平方向仍然居中。
    • IE9/10中使用display: table,内容区会跑到左上角。
    • 移动版Safari中内容区是水平对齐的,但是如果使用了百分比的宽度,水平方向上会稍稍偏离中心。

    Javascript:

    CSS

    /* Modernizr Test for Variable Height Content */ Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) { Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop); });

    1
    2
    3
    4
    /* Modernizr Test for Variable Height Content */
    Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
      Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
    });

    CSS:

    CSS

    .absolutecentercontent .Absolute-Center.is-Variable { display: table; height: auto; }

    1
    2
    3
    4
    .absolutecentercontent .Absolute-Center.is-Variable {
      display: table;
      height: auto;
    }

     

    加上overflow: auto会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界。

    [css] view plain copy

     

    1. .Absolute-Center.is-Overflow {  
    2.   overflow: auto;  
    3. }  

    加上overflow: auto会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界。

    [css] view plain copy

     

    1. .Absolute-Center.is-Overflow {  
    2.   overflow: auto;  
    3. }  

    九、负外边距(Negative Margins)

     

    这或许是当前最流行的使用方法。如果块元素尺寸已知,可以通过以下方式让内容块居中于容器显示:

    外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding,)的一半,再加上top: 50%; left: 50%;。即:

     

    [css] view plain copy

     

    1. .is-Negative {  
    2.         width: 300px;  
    3.         height: 200px;  
    4.         padding: 20px;  
    5.         position: absolute;  
    6.         top: 50%; left: 50%;  
    7.         margin-left: -170px; /* (width   padding)/2 */  
    8.         margin-top: -120px; /* (height   padding)/2 */  
    9. }  

     

    图片 37

     

    测试表明,这是唯一在IE6-IE7上也表现良好的方法。

    优点:

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

    2.      代码量少。

    缺点:

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

    2.      内容可能溢出容器。

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

     

    九、负外边距(Negative Margins)

     

    这或许是当前最流行的使用方法。如果块元素尺寸已知,可以通过以下方式让内容块居中于容器显示:

    外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding,)的一半,再加上top: 50%; left: 50%;。即:

     

    [css] view plain copy

     

    1. .is-Negative {  
    2.         width: 300px;  
    3.         height: 200px;  
    4.         padding: 20px;  
    5.         position: absolute;  
    6.         top: 50%; left: 50%;  
    7.         margin-left: -170px; /* (width   padding)/2 */  
    8.         margin-top: -120px; /* (height   padding)/2 */  
    9. }  

     

    图片 38

     

    测试表明,这是唯一在IE6-IE7上也表现良好的方法。

    优点:

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

    2.      代码量少。

    缺点:

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

    2.      内容可能溢出容器。

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

     

    其他方法

    “完全居中”法是解决居中问题的好方法,同时也有许多可以满足不同需求的其他方法。最常见的,推荐的方法有负margin值、transform法、table-cell法、inline-block法、以及现在出现的Flexbox法,这些方法其他文章都有深入介绍,所以这里只会稍稍提及。

     

    图片 39

    如果内容块自身不设置任何padding的话,可以设置max-height: 100%;来保证内容高度不超越容器高度。

    图片 40

    如果内容块自身不设置任何padding的话,可以设置max-height: 100%;来保证内容高度不超越容器高度。

    十、变形(Transforms)

     

    这是最简单的方法,不近能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀,还要加上

    top: 50%; left: 50%;

    代码类:

     

    [css] view plain copy

     

    1. .is-Transformed {   
    2.   width: 50%;  
    3.   margin: auto;  
    4.   position: absolute;  
    5.   top: 50%; left: 50%;  
    6.   -webkit-transform: translate(-50%,-50%);  
    7.       -ms-transform: translate(-50%,-50%);  
    8.           transform: translate(-50%,-50%);  
    9. }  

     

    图片 41

     

    优点:

    1.      内容可变高度

    2.      代码量少

    缺点:

    1.      IE8不支持

    2.      属性需要写浏览器厂商前缀

    3.      可能干扰其他transform效果

    4.      某些情形下会出现文本或元素边界渲染模糊的现象

    进一步了解transform实现居中的知识可以参考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

     

    十、变形(Transforms)

     

    这是最简单的方法,不近能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀,还要加上

    top: 50%; left: 50%;

    代码类:

     

    [css] view plain copy

     

    1. .is-Transformed {   
    2.   width: 50%;  
    3.   margin: auto;  
    4.   position: absolute;  
    5.   top: 50%; left: 50%;  
    6.   -webkit-transform: translate(-50%,-50%);  
    7.       -ms-transform: translate(-50%,-50%);  
    8.           transform: translate(-50%,-50%);  
    9. }  

     

    图片 42

     

    优点:

    1.      内容可变高度

    2.      代码量少

    缺点:

    1.      IE8不支持

    2.      属性需要写浏览器厂商前缀

    3.      可能干扰其他transform效果

    4.      某些情形下会出现文本或元素边界渲染模糊的现象

    进一步了解transform实现居中的知识可以参考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

     

    负margin值

    这或许是最常用的方法。如果知道了各个元素的大小,设置等于宽高一半大小的负margin值(如果没有使用box-sizing: border-box样式,还需要加上padding值),再配合top: 50%; left: 50%;样式就会使块元素居中。

    图片 43

    需要注意的是,这是按照预想情况也能在工作在IE6-7下的唯一方法。

    CSS

    .is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width padding)/2 */ margin-top: -120px; /* (height padding)/2 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .is-Negative {
            width: 300px;
            height: 200px;
            padding: 20px;
            position: absolute;
            top: 50%; left: 50%;
            margin-left: -170px; /* (width padding)/2 */
            margin-top: -120px; /* (height padding)/2 */
    }

    好处:

    • 浏览器兼容性非常好,甚至支持IE6-7
    • 需要的编码量很少

    同时注意:

    • 这是个非响应式的方法,不能使用百分比的大小,也不能设置min-/max-的最大值最小值。
    • 内容可能会超出容器
    • 需要为padding预留空间,或者需要使用box-sizing: border-box样式。

     

    六、重绘(Resizing)

    你可以使用其他class类或javascript代码来重绘内容块同时保证居中,无须手动重新计算中心尺寸。当然,你也可以添加resize属性来让用户拖拽实现内容块的重绘。

    六、重绘(Resizing)

    你可以使用其他class类或javascript代码来重绘内容块同时保证居中,无须手动重新计算中心尺寸。当然,你也可以添加resize属性来让用户拖拽实现内容块的重绘。

    十一、表格单元格(Table-Cell)

     

    总的说来这可能是最好的居中实现方法,因为内容块高度会随着实际内容的高度变化,浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记,需要三层元素让最内层的元素居中。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Table">  
    2.   <div class="Table-Cell">  
    3.     <div class="Center-Block">  
    4.     <!-- CONTENT -->  
    5.     </div>  
    6.   </div>  
    7. </div>  

    CSS:

     

    [css] view plain copy

     

    1. .Center-Container.is-Table { display: table; }  
    2. .is-Table .Table-Cell {  
    3.   display: table-cell;  
    4.   vertical-align: middle;  
    5. }  
    6. .is-Table .Center-Block {  
    7.   width: 50%;  
    8.   margin: 0 auto;  
    9. }  

     

    图片 44

     

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      跨浏览器兼容性好。

    缺点:

    需要额外html标记

    了解更多表格单元格实现居中的知识,请参考Roger Johansson发表在456bereastreet的文章《Flexibleheight vertical centering with CSS, beyond IE7》

     

    十一、表格单元格(Table-Cell)

     

    总的说来这可能是最好的居中实现方法,因为内容块高度会随着实际内容的高度变化,浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记,需要三层元素让最内层的元素居中。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Table">  
    2.   <div class="Table-Cell">  
    3.     <div class="Center-Block">  
    4.     <!-- CONTENT -->  
    5.     </div>  
    6.   </div>  
    7. </div>  

    CSS:

     

    [css] view plain copy

     

    1. .Center-Container.is-Table { display: table; }  
    2. .is-Table .Table-Cell {  
    3.   display: table-cell;  
    4.   vertical-align: middle;  
    5. }  
    6. .is-Table .Center-Block {  
    7.   width: 50%;  
    8.   margin: 0 auto;  
    9. }  

     

    图片 45

     

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      跨浏览器兼容性好。

    缺点:

    需要额外html标记

    了解更多表格单元格实现居中的知识,请参考Roger Johansson发表在456bereastreet的文章《Flexibleheight vertical centering with CSS, beyond IE7》

     

    transform法

    和“完全居中”法的好处一样,简单有效,同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。

    CSS

    .is-Transformed { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .is-Transformed {
      width: 50%;
      margin: auto;
      position: absolute;
      top: 50%; left: 50%;
      -webkit-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
    }

    图片 46

    好处:

    • 内容高度可变
    • 代码量小

    同时注意:

    • 不支持IE8
    • 需要写厂商前缀
    • 会和其他transform样式有冲突
    • 某些情况下的边缘和字体渲染会有问题

     

    绝对居中(Absolute Centering)可以保证内容块始终居中,无论内容块是否重绘。可以通过设置min-/max-来根据自己需要限制内容块的大小,并防止内容溢出窗口/容器。

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Resizable {  
    2.   min-width: 20%;  
    3.   max-width: 80%;  
    4.   min-height: 20%;  
    5.   max-height: 80%;  
    6.   resize: both;  
    7.   overflow: auto;  
    8. }  

    绝对居中(Absolute Centering)可以保证内容块始终居中,无论内容块是否重绘。可以通过设置min-/max-来根据自己需要限制内容块的大小,并防止内容溢出窗口/容器。

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Resizable {  
    2.   min-width: 20%;  
    3.   max-width: 80%;  
    4.   min-height: 20%;  
    5.   max-height: 80%;  
    6.   resize: both;  
    7.   overflow: auto;  
    8. }  

    十二、行内块元素(Inline-Block)

     

    很受欢迎的一种居中实现方式,基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。这个概念的解释可以参考CSS-Tricks上的文章《Centering in the Unknown》

    我这个例子也有一些其他地方见不到的小技巧,有助于解决一些小问题。

    如果内容块宽度大于容器宽度,比如放了一个很长的文本,但内容块宽度设置最大不能超过容器的100%减去0.25em,否则使用伪元素:after内容块会被挤到容器顶部,使用:before内容块会向下偏移100%。

    如果你的内容块需要占据尽可能多的水平空间,可以使用max-width: 99%;(针对较大的容器)或max-width: calc(100% -0.25em)(取决于支持的浏览器和容器宽度)。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Inline">  
    2.   <div class="Center-Block">  
    3.     <!-- CONTENT -->  
    4.   </div>  
    5. </div>  

    CSS:

     

     

    [css] view plain copy

     

    1. .Center-Container.is-Inline {   
    2.   text-align: center;  
    3.   overflow: auto;  
    4. }  
    5.   
    6. .Center-Container.is-Inline:after,  
    7. .is-Inline .Center-Block {  
    8.   display: inline-block;  
    9.   vertical-align: middle;  
    10. }  
    11.   
    12. .Center-Container.is-Inline:after {  
    13.   content: '';  
    14.   height: 100%;  
    15.   margin-left: -0.25em; /* To offset spacing. May vary by font */  
    16. }  
    17.   
    18. .is-Inline .Center-Block {  
    19.   max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
    20.   /* max-width: calc(100% - 0.25em) /* Only for IE9  */   
    21. }  

     

    这种方法的优劣和单元格Table-Cell方式差不多,起初我把这种方式忽略掉了,因为这确实是一种hack方法。不过,无论如何,这是很流行的一种用法,浏览器支持的也很好。

    图片 47

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      支持跨浏览器,也适应于IE7。

    缺点:

    1.需要一个容器

    2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

    3.内容块宽度不能超过容器的100% - 0.25em。

     

    更多相关知识参考ChrisCoyier的文章《Centeringin the Unknown》

    十二、行内块元素(Inline-Block)

     

    很受欢迎的一种居中实现方式,基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。这个概念的解释可以参考CSS-Tricks上的文章《Centering in the Unknown》

    我这个例子也有一些其他地方见不到的小技巧,有助于解决一些小问题。

    如果内容块宽度大于容器宽度,比如放了一个很长的文本,但内容块宽度设置最大不能超过容器的100%减去0.25em,否则使用伪元素:after内容块会被挤到容器顶部,使用:before内容块会向下偏移100%。

    如果你的内容块需要占据尽可能多的水平空间,可以使用max-width: 99%;(针对较大的容器)或max-width: calc(100% -0.25em)(取决于支持的浏览器和容器宽度)。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Inline">  
    2.   <div class="Center-Block">  
    3.     <!-- CONTENT -->  
    4.   </div>  
    5. </div>  

    CSS:

     

     

    [css] view plain copy

     

    1. .Center-Container.is-Inline {   
    2.   text-align: center;  
    3.   overflow: auto;  
    4. }  
    5.   
    6. .Center-Container.is-Inline:after,  
    7. .is-Inline .Center-Block {  
    8.   display: inline-block;  
    9.   vertical-align: middle;  
    10. }  
    11.   
    12. .Center-Container.is-Inline:after {  
    13.   content: '';  
    14.   height: 100%;  
    15.   margin-left: -0.25em; /* To offset spacing. May vary by font */  
    16. }  
    17.   
    18. .is-Inline .Center-Block {  
    19.   max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
    20.   /* max-width: calc(100% - 0.25em) /* Only for IE9  */   
    21. }  

     

    这种方法的优劣和单元格Table-Cell方式差不多,起初我把这种方式忽略掉了,因为这确实是一种hack方法。不过,无论如何,这是很流行的一种用法,浏览器支持的也很好。

    图片 48

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      支持跨浏览器,也适应于IE7。

    缺点:

    1.需要一个容器

    2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

    3.内容块宽度不能超过容器的100% - 0.25em。

     

    更多相关知识参考ChrisCoyier的文章《Centeringin the Unknown》

    table-cell法

    这种可能是最好的方法,因为高度可以随内容改变,浏览器支持也不差。主要缺陷是会产生额外的标签,每一个需要居中的元素需要三个额外的HTML标签。

    图片 49

    HTML:

    CSS

    <div class="Center-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> <!-- CONTENT --> </div> </div> </div>

    1
    2
    3
    4
    5
    6
    7
    <div class="Center-Container is-Table">
      <div class="Table-Cell">
        <div class="Center-Block">
        <!-- CONTENT -->
        </div>
      </div>
    </div>

    CSS:

    CSS

    .Center-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .Center-Container.is-Table { display: table; }
    .is-Table .Table-Cell {
      display: table-cell;
      vertical-align: middle;
    }
    .is-Table .Center-Block {
      width: 50%;
      margin: 0 auto;
    }

    好处:

    • 内容高度可变
    • 内容溢出则能自动撑开父元素高度
    • 浏览器兼容性好

    同时注意:

    • 需要额外的HTML标签

    图片 50

     

    如果不使用resize:both属性,可以使用CSS3动画属性transition来实现重绘的窗口之间平滑的过渡。一定要设置overflow:auto;以防重绘的内容块尺寸小于内容的实际尺寸这种情况出现。

    绝对居中(AbsoluteCentering)是唯一支持resize:both属性实现垂直居中的技术。

    注意:

    1. 要设置max-width/max-height属性来弥补内容块padding,否则可能溢出。
    2. 手机浏览器和IE8-IE10浏览器不支持resize属性,所以如果对你来说,这部分用户体验很必要,务必保证对resizing你的用户有可行的退路。
    3. 联合使用resize 和 transition属性会在用户重绘时,产生一个transition动画延迟时间。

    图片 51

     

    如果不使用resize:both属性,可以使用CSS3动画属性transition来实现重绘的窗口之间平滑的过渡。一定要设置overflow:auto;以防重绘的内容块尺寸小于内容的实际尺寸这种情况出现。

    绝对居中(AbsoluteCentering)是唯一支持resize:both属性实现垂直居中的技术。

    注意:

    1. 要设置max-width/max-height属性来弥补内容块padding,否则可能溢出。
    2. 手机浏览器和IE8-IE10浏览器不支持resize属性,所以如果对你来说,这部分用户体验很必要,务必保证对resizing你的用户有可行的退路。
    3. 联合使用resize 和 transition属性会在用户重绘时,产生一个transition动画延迟时间。

    十三、Flexbox

     

    这是CSS布局未来的趋势。Flexbox是CSS3新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with Flexbox》

    记住Flexbox不只是用于居中,也可以分栏或者解决一些令人抓狂的布局问题。

    图片 52

    优点:

    1.内容块的宽高任意,优雅的溢出。

    2.可用于更复杂高级的布局技术中。

    缺点:

    1.      IE8/IE9不支持。

    2.      Body需要特定的容器和CSS样式。

    3.      运行于现代浏览器上的代码需要浏览器厂商前缀。

    4.      表现上可能会有一些问题

    有关Flexbox Centering的文章可以参考David Storey的文章《Designing CSS Layouts WithFlexbox Is As Easy As Pie》

     

    建议:

    每种技术都有其优劣之处。你选择哪一种技术取决于支持的浏览器和你的编码。使用上面的对照表有助于你做出决定。

    作为一种简单的替代方案,绝对居中(Absolute Centering)技术表现良好。曾经你使用负边距(Negative Margins)的地方,现在可以用绝对居中(Absolute Centering)替代了。你不再需要处理讨厌的边距计算和额外的标记,而且还能让内容块自适应大小居中。

    如果你的站点需要可变高度的内容,可以试试单元格(Table-Cell)和行内块元素(Inline-Block)这两种方法。如果你处在流血的边缘,试试Flexbox,体验一下这一高级布局技术的好处吧。

    十三、Flexbox

     

    这是CSS布局未来的趋势。Flexbox是CSS3新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with Flexbox》

    记住Flexbox不只是用于居中,也可以分栏或者解决一些令人抓狂的布局问题。

    图片 53

    优点:

    1.内容块的宽高任意,优雅的溢出。

    2.可用于更复杂高级的布局技术中。

    缺点:

    1.      IE8/IE9不支持。

    2.      Body需要特定的容器和CSS样式。

    3.      运行于现代浏览器上的代码需要浏览器厂商前缀。

    4.      表现上可能会有一些问题

    有关Flexbox Centering的文章可以参考David Storey的文章《Designing CSS Layouts WithFlexbox Is As Easy As Pie》

     

    建议:

    每种技术都有其优劣之处。你选择哪一种技术取决于支持的浏览器和你的编码。使用上面的对照表有助于你做出决定。

    作为一种简单的替代方案,绝对居中(Absolute Centering)技术表现良好。曾经你使用负边距(Negative Margins)的地方,现在可以用绝对居中(Absolute Centering)替代了。你不再需要处理讨厌的边距计算和额外的标记,而且还能让内容块自适应大小居中。

    如果你的站点需要可变高度的内容,可以试试单元格(Table-Cell)和行内块元素(Inline-Block)这两种方法。如果你处在流血的边缘,试试Flexbox,体验一下这一高级布局技术的好处吧。

    七、图片(Images)

     

    绝对居中(AbsoluteCentering)也适用于图片。对图片自身应用class类或CSS样式,并给图片添加height:auto样式,图片会自适应居中显示,如果外层容器可以resize则随着容器的重绘,图片也相应重绘,始终保持居中。

    需要注意的是height:auto虽然对图片居中有用,但如果是在图片外层的内容块上应用了height:auto则会产生一些问题:规则的内容块会被拉伸填充整个容器。这时,我们可以使用可变高度(Variable Height)方式解决这个问题。问题的原因可能是渲染图片时要计算图片高度,这就如同你自己定义了图片高度一样,浏览器得到了图片高度就不会像其他情况一样去解析margin:auto垂直居中了。所以我们最好对图片自身应用这些样式而不是父元素。

    图片 54

     

    HTML:

    [html] view plain copy

     

    1. <img src="" class="Absolute-Center is-Image" alt="" />  

      CSS:


     

    [css] view plain copy

     

    1. .Absolute-Center.is-Image {  
    2.   height: auto;  
    3. }  
    4.   
    5. .Absolute-Center.is-Image img {   
    6.   width: 100%;  
    7.   height: auto;  
    8. }  

    最好是对图片自身应用此方法,效果如下图:

    图片 55

    七、图片(Images)

     

    绝对居中(AbsoluteCentering)也适用于图片。对图片自身应用class类或CSS样式,并给图片添加height:auto样式,图片会自适应居中显示,如果外层容器可以resize则随着容器的重绘,图片也相应重绘,始终保持居中。

    需要注意的是height:auto虽然对图片居中有用,但如果是在图片外层的内容块上应用了height:auto则会产生一些问题:规则的内容块会被拉伸填充整个容器。这时,我们可以使用可变高度(Variable Height)方式解决这个问题。问题的原因可能是渲染图片时要计算图片高度,这就如同你自己定义了图片高度一样,浏览器得到了图片高度就不会像其他情况一样去解析margin:auto垂直居中了。所以我们最好对图片自身应用这些样式而不是父元素。

    图片 56

     

    HTML:

    [html] view plain copy

     

    1. <img src="" class="Absolute-Center is-Image" alt="" />  

      CSS:


     

    [css] view plain copy

     

    1. .Absolute-Center.is-Image {  
    2.   height: auto;  
    3. }  
    4.   
    5. .Absolute-Center.is-Image img {   
    6.   width: 100%;  
    7.   height: auto;  
    8. }  

    最好是对图片自身应用此方法,效果如下图:

    图片 57

    inline-block法

    迫切需要的方法:inline-block法居中。基本方法是使用 display: inline-blockvertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。

    内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然,内容区域会被推到顶端,这就是使用:after伪类的原因。使用:before伪类则会让元素有100%的大小!

    图片 58

    如果内容块需要尽可能大地占用水平空间,可以为大容器加上max-width: 99%;样式,或者考虑浏览器和容器宽度的情况下使用max-width: calc(100% – 0.25em) 样式。

    这种方法和table-cell的大多数好处相同,不过最初我放弃了这个方法,因为它更像是hack。不管这一点的话,浏览器支持很不错,而且也被证实是很流行的方法。

    HTML:

    XHTML

    <div class="Center-Container is-Inline"> <div class="Center-Block"> <!-- CONTENT --> </div> </div>

    1
    2
    3
    4
    5
    <div class="Center-Container is-Inline">
      <div class="Center-Block">
        <!-- CONTENT -->
      </div>
    </div>

    CSS:

    CSS

    .Center-Container.is-Inline { text-align: center; overflow: auto; } .Center-Container.is-Inline:after, .is-Inline .Center-Block { display: inline-block; vertical-align: middle; } .Center-Container.is-Inline:after { content: ''; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */ } .is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for IE9 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .Center-Container.is-Inline {
      text-align: center;
      overflow: auto;
    }
     
    .Center-Container.is-Inline:after,
    .is-Inline .Center-Block {
      display: inline-block;
      vertical-align: middle;
    }
     
    .Center-Container.is-Inline:after {
      content: '';
      height: 100%;
      margin-left: -0.25em; /* To offset spacing. May vary by font */
    }
     
    .is-Inline .Center-Block {
      max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
      /* max-width: calc(100% - 0.25em) /* Only for IE9 */
    }

    好处:

    • 内容高度可变
    • 内容溢出则能自动撑开父元素高度
    • 浏览器兼容性好,甚至可以调整支持IE7

    同时注意:

    • 需要额外容器
    • 依赖于margin-left: -0.25em的样式,做到水平居中,需要为不同的字体大小作调整
    • 内容区声明的宽度不能大于容器的100% 减去0.25em的宽度

     

    八、可变高度(Variable Height)

     

    这种情况下实现绝对居中(AbsoluteCentering)必须要声明一个高度,不管你是基于百分比的高度还是通过max-height控制的高度,还有,别忘了设置合适的overflow属性。对自适应/响应式情景,这种方法很不错。

    与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高,内容块都会保持居中。这种方法在一些浏览器(如IE/FireFox)上会有问题,我的搭档Kalley 

    在ELL Creative(访问ellcreative.com )上写了一个基于Modernizr插件的检测函数,用来检测浏览器是否支持这种居中方法,进一步增强用户体验。

    八、可变高度(Variable Height)

     

    这种情况下实现绝对居中(AbsoluteCentering)必须要声明一个高度,不管你是基于百分比的高度还是通过max-height控制的高度,还有,别忘了设置合适的overflow属性。对自适应/响应式情景,这种方法很不错。

    与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高,内容块都会保持居中。这种方法在一些浏览器(如IE/FireFox)上会有问题,我的搭档Kalley 

    在ELL Creative(访问ellcreative.com )上写了一个基于Modernizr插件的检测函数,用来检测浏览器是否支持这种居中方法,进一步增强用户体验。

    Flexbox法

    CSS未来发展的方向就是采用Flexbox这种设计,解决像垂直居中这种共同的问题。请注意,Flexbox有不止一种办法居中,他也可以用来分栏,并解决奇奇怪怪的布局问题。

    图片 59

    CSS

    .Center-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .Center-Container.is-Flexbox {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
         -moz-box-align: center;
         -ms-flex-align: center;
      -webkit-align-items: center;
              align-items: center;
      -webkit-box-pack: center;
         -moz-box-pack: center;
         -ms-flex-pack: center;
      -webkit-justify-content: center;
              justify-content: center;
    }

    好处:

    • 内容可以是任意高宽,溢出也能表现良好
    • 可以用于各种高级布局技巧

    同时注意: 不支持IE8-9

    • 需要在body上写样式,或者需要额外容器
    • 需要各种厂商前缀兼容现代浏览器
    • 可能有潜在的性能问题

     

    Javascript:

     

    [javascript] view plain copy

     

    1. /* Modernizr Test for Variable Height Content */  
    2. Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {  
    3.   Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);  
    4. });  

      CSS:


     

     

    [css] view plain copy

     

    1. .absolutecentercontent .Absolute-Center.is-Variable {  
    2.   display: table;  
    3.   height: auto;  
    4. }  

    Javascript:

     

    [javascript] view plain copy

     

    1. /* Modernizr Test for Variable Height Content */  
    2. Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {  
    3.   Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);  
    4. });  

      CSS:


     

     

    [css] view plain copy

     

    1. .absolutecentercontent .Absolute-Center.is-Variable {  
    2.   display: table;  
    3.   height: auto;  
    4. }  

    最后的建议

    各项技术都有各自的好处,采取什么样的方法,取决于你所支持的浏览器,以及现有标签的结构。请使用上面提供对照表帮你选出最符合你需要的方法。

    “完全居中”法简单方便,迅速及时。以前使用负Margin值的地方,都可以使用Absolute居中。无需繁琐的数学计算,无需额外标签,而且可以随时改变大小。

    如果网站需要可变高度的内容,而且同时照顾到浏览器兼容性的话,可以尝试table-cell和inline-block技术,如果想尝试新鲜事物的话,可以使用Flexbox,并享受这种高级技术带来的好处。

    1 赞 5 收藏 11 评论

    图片 60

     

    缺点:

    浏览器兼容性不太好,若Modernizr不能满足你的需求,你需要寻找其他方法解决。

    1.      与上述重绘(Resizing)情况的方法不兼容

    2.      Firefox/IE8:使用display:table会使内容块垂直居上,不过水平还是居中的。

    3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

    4.      Mobile Safari:内容块垂直居中;若使用百分比宽度,水平方向居中会稍微偏离中心位置。

    图片 61

     

    缺点:

    浏览器兼容性不太好,若Modernizr不能满足你的需求,你需要寻找其他方法解决。

    1.      与上述重绘(Resizing)情况的方法不兼容

    2.      Firefox/IE8:使用display:table会使内容块垂直居上,不过水平还是居中的。

    3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

    4.      Mobile Safari:内容块垂直居中;若使用百分比宽度,水平方向居中会稍微偏离中心位置。

    关于作者:埃姆杰

    图片 62

    (新浪微博:@埃姆杰) 个人主页 · 我的文章 · 1

    图片 63

    Ⅱ.其他居中实现技术

     

    绝对居中(Absolute Centering)是一种非常不错的技术,除此之外还有一些方法可以满足更多的具体需求,最常见的推荐:NegativeMargins, Transforms,Table-Cell, Inline-Block方式和新出现的Flexbox.方式。这些方法许多文章都有深入讲解,这里只做简单阐述。

    Ⅱ.其他居中实现技术

     

    绝对居中(Absolute Centering)是一种非常不错的技术,除此之外还有一些方法可以满足更多的具体需求,最常见的推荐:NegativeMargins, Transforms,Table-Cell, Inline-Block方式和新出现的Flexbox.方式。这些方法许多文章都有深入讲解,这里只做简单阐述。

    九、负外边距(Negative Margins)

     

    这或许是当前最流行的使用方法。如果块元素尺寸已知,可以通过以下方式让内容块居中于容器显示:

    九、负外边距(Negative Margins)

     

    这或许是当前最流行的使用方法。如果块元素尺寸已知,可以通过以下方式让内容块居中于容器显示:

    外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding,)的一半,再加上top: 50%; left: 50%;。即:

     

    [css] view plain copy

     

    1. .is-Negative {  
    2.         width: 300px;  
    3.         height: 200px;  
    4.         padding: 20px;  
    5.         position: absolute;  
    6.         top: 50%; left: 50%;  
    7.         margin-left: -170px; /* (width   padding)/2 */  
    8.         margin-top: -120px; /* (height   padding)/2 */  
    9. }  

     

    图片 64

     

    测试表明,这是唯一在IE6-IE7上也表现良好的方法。

    优点:

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

    2.      代码量少。

    缺点:

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

    2.      内容可能溢出容器。

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

    外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding,)的一半,再加上top: 50%; left: 50%;。即:

     

    [css] view plain copy

     

    1. .is-Negative {  
    2.         width: 300px;  
    3.         height: 200px;  
    4.         padding: 20px;  
    5.         position: absolute;  
    6.         top: 50%; left: 50%;  
    7.         margin-left: -170px; /* (width   padding)/2 */  
    8.         margin-top: -120px; /* (height   padding)/2 */  
    9. }  

     

    图片 65

     

    测试表明,这是唯一在IE6-IE7上也表现良好的方法。

    优点:

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

    2.      代码量少。

    缺点:

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

    2.      内容可能溢出容器。

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

    十、变形(Transforms)

     

    这是最简单的方法,不近能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀,还要加上

    top: 50%; left: 50%;

    十、变形(Transforms)

     

    这是最简单的方法,不近能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀,还要加上

    top: 50%; left: 50%;

    代码类:

     

    [css] view plain copy

     

    1. .is-Transformed {   
    2.   width: 50%;  
    3.   margin: auto;  
    4.   position: absolute;  
    5.   top: 50%; left: 50%;  
    6.   -webkit-transform: translate(-50%,-50%);  
    7.       -ms-transform: translate(-50%,-50%);  
    8.           transform: translate(-50%,-50%);  
    9. }  

     

    图片 66

     

    优点:

    1.      内容可变高度

    2.      代码量少

    缺点:

    1.      IE8不支持

    2.      属性需要写浏览器厂商前缀

    3.      可能干扰其他transform效果

    4.      某些情形下会出现文本或元素边界渲染模糊的现象

    代码类:

     

    [css] view plain copy

     

    1. .is-Transformed {   
    2.   width: 50%;  
    3.   margin: auto;  
    4.   position: absolute;  
    5.   top: 50%; left: 50%;  
    6.   -webkit-transform: translate(-50%,-50%);  
    7.       -ms-transform: translate(-50%,-50%);  
    8.           transform: translate(-50%,-50%);  
    9. }  

     

    图片 67

     

    优点:

    1.      内容可变高度

    2.      代码量少

    缺点:

    1.      IE8不支持

    2.      属性需要写浏览器厂商前缀

    3.      可能干扰其他transform效果

    4.      某些情形下会出现文本或元素边界渲染模糊的现象

    进一步了解transform实现居中的知识可以参考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

     

    进一步了解transform实现居中的知识可以参考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

     

    十一、表格单元格(Table-Cell)

     

    总的说来这可能是最好的居中实现方法,因为内容块高度会随着实际内容的高度变化,浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记,需要三层元素让最内层的元素居中。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Table">  
    2.   <div class="Table-Cell">  
    3.     <div class="Center-Block">  
    4.     <!-- CONTENT -->  
    5.     </div>  
    6.   </div>  
    7. </div>  

      CSS:


     

    [css] view plain copy

     

    1. .Center-Container.is-Table { display: table; }  
    2. .is-Table .Table-Cell {  
    3.   display: table-cell;  
    4.   vertical-align: middle;  
    5. }  
    6. .is-Table .Center-Block {  
    7.   width: 50%;  
    8.   margin: 0 auto;  
    9. }  

     

    图片 68

     

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      跨浏览器兼容性好。

    缺点:

    需要额外html标记

    了解更多表格单元格实现居中的知识,请参考Roger Johansson发表在456bereastreet的文章《Flexibleheight vertical centering with CSS, beyond IE7》

    十一、表格单元格(Table-Cell)

     

    总的说来这可能是最好的居中实现方法,因为内容块高度会随着实际内容的高度变化,浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记,需要三层元素让最内层的元素居中。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Table">  
    2.   <div class="Table-Cell">  
    3.     <div class="Center-Block">  
    4.     <!-- CONTENT -->  
    5.     </div>  
    6.   </div>  
    7. </div>  

      CSS:


     

    [css] view plain copy

     

    1. .Center-Container.is-Table { display: table; }  
    2. .is-Table .Table-Cell {  
    3.   display: table-cell;  
    4.   vertical-align: middle;  
    5. }  
    6. .is-Table .Center-Block {  
    7.   width: 50%;  
    8.   margin: 0 auto;  
    9. }  

     

    图片 69

     

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      跨浏览器兼容性好。

    缺点:

    需要额外html标记

    了解更多表格单元格实现居中的知识,请参考Roger Johansson发表在456bereastreet的文章《Flexibleheight vertical centering with CSS, beyond IE7》

     

     

     

     

    十二、行内块元素(Inline-Block)

     

    很受欢迎的一种居中实现方式,基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。这个概念的解释可以参考CSS-Tricks上的文章《Centering in the Unknown》

    我这个例子也有一些其他地方见不到的小技巧,有助于解决一些小问题。

    如果内容块宽度大于容器宽度,比如放了一个很长的文本,但内容块宽度设置最大不能超过容器的100%减去0.25em,否则使用伪元素:after内容块会被挤到容器顶部,使用:before内容块会向下偏移100%。

    十二、行内块元素(Inline-Block)

     

    很受欢迎的一种居中实现方式,基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。这个概念的解释可以参考CSS-Tricks上的文章《Centering in the Unknown》

    我这个例子也有一些其他地方见不到的小技巧,有助于解决一些小问题。

    如果内容块宽度大于容器宽度,比如放了一个很长的文本,但内容块宽度设置最大不能超过容器的100%减去0.25em,否则使用伪元素:after内容块会被挤到容器顶部,使用:before内容块会向下偏移100%。

    如果你的内容块需要占据尽可能多的水平空间,可以使用max-width: 99%;(针对较大的容器)或max-width: calc(100% -0.25em)(取决于支持的浏览器和容器宽度)。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Inline">  
    2.   <div class="Center-Block">  
    3.     <!-- CONTENT -->  
    4.   </div>  
    5. </div>  

      CSS:


     

     

    [css] view plain copy

     

    1. .Center-Container.is-Inline {   
    2.   text-align: center;  
    3.   overflow: auto;  
    4. }  
    5.   
    6. .Center-Container.is-Inline:after,  
    7. .is-Inline .Center-Block {  
    8.   display: inline-block;  
    9.   vertical-align: middle;  
    10. }  
    11.   
    12. .Center-Container.is-Inline:after {  
    13.   content: '';  
    14.   height: 100%;  
    15.   margin-left: -0.25em; /* To offset spacing. May vary by font */  
    16. }  
    17.   
    18. .is-Inline .Center-Block {  
    19.   max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
    20.   /* max-width: calc(100% - 0.25em) /* Only for IE9  */   
    21. }  

    如果你的内容块需要占据尽可能多的水平空间,可以使用max-width: 99%;(针对较大的容器)或max-width: calc(100% -0.25em)(取决于支持的浏览器和容器宽度)。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Inline">  
    2.   <div class="Center-Block">  
    3.     <!-- CONTENT -->  
    4.   </div>  
    5. </div>  

      CSS:


     

     

    [css] view plain copy

     

    1. .Center-Container.is-Inline {   
    2.   text-align: center;  
    3.   overflow: auto;  
    4. }  
    5.   
    6. .Center-Container.is-Inline:after,  
    7. .is-Inline .Center-Block {  
    8.   display: inline-block;  
    9.   vertical-align: middle;  
    10. }  
    11.   
    12. .Center-Container.is-Inline:after {  
    13.   content: '';  
    14.   height: 100%;  
    15.   margin-left: -0.25em; /* To offset spacing. May vary by font */  
    16. }  
    17.   
    18. .is-Inline .Center-Block {  
    19.   max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
    20.   /* max-width: calc(100% - 0.25em) /* Only for IE9  */   
    21. }  

     

     

    这种方法的优劣和单元格Table-Cell方式差不多,起初我把这种方式忽略掉了,因为这确实是一种hack方法。不过,无论如何,这是很流行的一种用法,浏览器支持的也很好。

    图片 70

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      支持跨浏览器,也适应于IE7。

    缺点:

    1.需要一个容器

    2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

    3.内容块宽度不能超过容器的100% - 0.25em。

     

    更多相关知识参考ChrisCoyier的文章《Centeringin the Unknown》

     

     

    这种方法的优劣和单元格Table-Cell方式差不多,起初我把这种方式忽略掉了,因为这确实是一种hack方法。不过,无论如何,这是很流行的一种用法,浏览器支持的也很好。

    图片 71

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      支持跨浏览器,也适应于IE7。

    缺点:

    1.需要一个容器

    2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

    3.内容块宽度不能超过容器的100% - 0.25em。

     

    更多相关知识参考ChrisCoyier的文章《Centeringin the Unknown》

    十三、Flexbox

     

    这是CSS布局未来的趋势。Flexbox是CSS3新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with Flexbox》

    记住Flexbox不只是用于居中,也可以分栏或者解决一些令人抓狂的布局问题。

    图片 72

    优点:

    1.内容块的宽高任意,优雅的溢出。

    2.可用于更复杂高级的布局技术中。

    缺点:

    1.      IE8/IE9不支持。

    2.      Body需要特定的容器和CSS样式。

    3.      运行于现代浏览器上的代码需要浏览器厂商前缀。

    4.      表现上可能会有一些问题

    十三、Flexbox

     

    这是CSS布局未来的趋势。Flexbox是CSS3新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with Flexbox》

    记住Flexbox不只是用于居中,也可以分栏或者解决一些令人抓狂的布局问题。

    图片 73

    优点:

    1.内容块的宽高任意,优雅的溢出。

    2.可用于更复杂高级的布局技术中。

    缺点:

    1.      IE8/IE9不支持。

    2.      Body需要特定的容器和CSS样式。

    3.      运行于现代浏览器上的代码需要浏览器厂商前缀。

    4.      表现上可能会有一些问题

    有关Flexbox Centering的文章可以参考David Storey的文章《Designing CSS Layouts WithFlexbox Is As Easy As Pie》

     

    建议:

    每种技术都有其优劣之处。你选择哪一种技术取决于支持的浏览器和你的编码。使用上面的对照表有助于你做出决定。

    作为一种简单的替代方案,绝对居中(Absolute Centering)技术表现良好。曾经你使用负边距(Negative Margins)的地方,现在可以用绝对居中(Absolute Centering)替代了。你不再需要处理讨厌的边距计算和额外的标记,而且还能让内容块自适应大小居中。

    有关Flexbox Centering的文章可以参考David Storey的文章《Designing CSS Layouts WithFlexbox Is As Easy As Pie》

     

    建议:

    每种技术都有其优劣之处。你选择哪一种技术取决于支持的浏览器和你的编码。使用上面的对照表有助于你做出决定。

    作为一种简单的替代方案,绝对居中(Absolute Centering)技术表现良好。曾经你使用负边距(Negative Margins)的地方,现在可以用绝对居中(Absolute Centering)替代了。你不再需要处理讨厌的边距计算和额外的标记,而且还能让内容块自适应大小居中。

    如果你的站点需要可变高度的内容,可以试试单元格(Table-Cell)和行内块元素(Inline-Block)这两种方法。如果你处在流血的边缘,试试Flexbox,体验一下这一高级布局技术的好处吧。

    如果你的站点需要可变高度的内容,可以试试单元格(Table-Cell)和行内块元素(Inline-Block)这两种方法。如果你处在流血的边缘,试试Flexbox,体验一下这一高级布局技术的好处吧。

    Ⅰ.绝对定位居中(Absolute Centering)技术

     

    我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:

    [css] view plain copy

     

    1. .Absolute-Center {  
    2.   margin: auto;  
    3.   position: absolute;  
    4.   top: 0; left: 0; bottom: 0; right: 0;  
    5. }  

    我不是这种实现方法的第一人,可能这只是非常常见的一种小技术,我斗胆将其命名为绝对居中(Absolute Centering),虽然如此,但是大多数讨论垂直居中的文章却从来不提这种方法,直到我最近浏览《How to Center Anything WithCSS》这篇文章的评论时候才发现这种用法。在评论列表中Simon和Priit都提及了此方法。

    如果你有任何扩展的功能或建议,可以在此跟帖:

    CodePen

    SmashingMagazine

    Twitter @shshaw

    优点:

    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设备上不起作用。

    浏览器兼容性:

    Chrome,Firefox, Safari, Mobile Safari, IE8-10.

    绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。

    对比表格:

    绝对居中法并不是唯一的实现方法,实现垂直居中还有些其他的方法,并各有各的优势。采用哪种技术取决于你的浏览器是否支持和你使用的语言标记。这个对照表有助于你根据自己的需求做出正确的选择。

     

    Technique

    Browser Support

    Responsive

    Overflow

    resize:both

    Variable Height

    Major Caveats

    Absolute Centering

    Modern & IE8

    Yes

    Scroll, can overflow container

    Yes

    Yes*

    Variable Height not perfect cross-browser

    Negative Margins

    All

    No

    Scroll

    Resizes but doesn't stay centered

    No

    Not responsive, margins must be calculated manually

    Transforms

    Modern & IE9

    Yes

    Scroll, can overflow container

    Yes

    Yes

    Blurry rendering

    Table-Cell

    Modern & IE8

    Yes

    Expands container

    No

    Yes

    Extra markup

    Inline-Block

    Modern, IE8 & IE7*

    Yes

    Expands container

    No

    Yes

    Requires container, hacky styles

    Flexbox

    Modern & IE10

    Yes

    Scroll, can overflow container

    Yes

    Yes

    Requires container, vendor prefixes

     

    解释

    通过以上描述,绝对居中(AbsoluteCentering)的工作机理可以阐述如下:

    1、在普通内容流(normal content flow)中,margin:auto的效果等同于margin-top:0;margin-bottom:0。

    W3C中写道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

    2、position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时绝对定位部分不进行渲染。

    Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space

    3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块block将填充其父元素的所有可用空间,父元素一般为body或者声明为position:relative;的容器。

    Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).

    4、  给内容块设置一个高度height或宽度width,能够防止内容块占据所有的可用空间,促使浏览器根据新的边界框重新计算margin:auto

    Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.

    5、由于内容块被绝对定位,脱离了正常的内容流,浏览器会给margin-top,margin-bottom相同的值,使元素块在先前定义的边界内居中。

    W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

    这么看来, margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的,所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。

    简而言之(TL;DR):绝对定位元素不在普通内容流中渲染,因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

    居中方式:

     

    Ⅰ.绝对定位居中(Absolute Centering)技术

     

    我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:

    [css] view plain copy

     

    1. .Absolute-Center {  
    2.   margin: auto;  
    3.   position: absolute;  
    4.   top: 0; left: 0; bottom: 0; right: 0;  
    5. }  

    我不是这种实现方法的第一人,可能这只是非常常见的一种小技术,我斗胆将其命名为绝对居中(Absolute Centering),虽然如此,但是大多数讨论垂直居中的文章却从来不提这种方法,直到我最近浏览《How to Center Anything WithCSS》这篇文章的评论时候才发现这种用法。在评论列表中Simon和Priit都提及了此方法。

    如果你有任何扩展的功能或建议,可以在此跟帖:

    CodePen

    SmashingMagazine

    Twitter @shshaw

    优点:

    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设备上不起作用。

    浏览器兼容性:

    Chrome,Firefox, Safari, Mobile Safari, IE8-10.

    绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。

    对比表格:

    绝对居中法并不是唯一的实现方法,实现垂直居中还有些其他的方法,并各有各的优势。采用哪种技术取决于你的浏览器是否支持和你使用的语言标记。这个对照表有助于你根据自己的需求做出正确的选择。

     

    Technique

    Browser Support

    Responsive

    Overflow

    resize:both

    Variable Height

    Major Caveats

    Absolute Centering

    Modern & IE8

    Yes

    Scroll, can overflow container

    Yes

    Yes*

    Variable Height not perfect cross-browser

    Negative Margins

    All

    No

    Scroll

    Resizes but doesn't stay centered

    No

    Not responsive, margins must be calculated manually

    Transforms

    Modern & IE9

    Yes

    Scroll, can overflow container

    Yes

    Yes

    Blurry rendering

    Table-Cell

    Modern & IE8

    Yes

    Expands container

    No

    Yes

    Extra markup

    Inline-Block

    Modern, IE8 & IE7*

    Yes

    Expands container

    No

    Yes

    Requires container, hacky styles

    Flexbox

    Modern & IE10

    Yes

    Scroll, can overflow container

    Yes

    Yes

    Requires container, vendor prefixes

     

    解释

    通过以上描述,绝对居中(AbsoluteCentering)的工作机理可以阐述如下:

    1、在普通内容流(normal content flow)中,margin:auto的效果等同于margin-top:0;margin-bottom:0。

    W3C中写道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

    2、position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时绝对定位部分不进行渲染。

    Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space

    3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块block将填充其父元素的所有可用空间,父元素一般为body或者声明为position:relative;的容器。

    Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).

    4、  给内容块设置一个高度height或宽度width,能够防止内容块占据所有的可用空间,促使浏览器根据新的边界框重新计算margin:auto

    Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.

    5、由于内容块被绝对定位,脱离了正常的内容流,浏览器会给margin-top,margin-bottom相同的值,使元素块在先前定义的边界内居中。

    W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

    这么看来, margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的,所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。

    简而言之(TL;DR):绝对定位元素不在普通内容流中渲染,因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

    居中方式:

     

    一、容器内(Within Container)

     

    内容块的父容器设置为position:relative,使用上述绝对居中方式,可以使内容居中显示于父容器。

    [css] view plain copy

     

    1. .Center-Container {  
    2.   position: relative;  
    3. }  
    4.   
    5. .Absolute-Center {  
    6.   width: 50%;  
    7.   height: 50%;  
    8.   overflow: auto;  
    9.   margin: auto;  
    10.   position: absolute;  
    11.   top: 0; left: 0; bottom: 0; right: 0;  
    12. }  

     

    图片 74

    以下其余的demo默认上面的CSS样式已引用包括进去,在此基础上只提供额外的类供用户追加以实现不同的功能。

     

    一、容器内(Within Container)

     

    内容块的父容器设置为position:relative,使用上述绝对居中方式,可以使内容居中显示于父容器。

    [css] view plain copy

     

    1. .Center-Container {  
    2.   position: relative;  
    3. }  
    4.   
    5. .Absolute-Center {  
    6.   width: 50%;  
    7.   height: 50%;  
    8.   overflow: auto;  
    9.   margin: auto;  
    10.   position: absolute;  
    11.   top: 0; left: 0; bottom: 0; right: 0;  
    12. }  

     

    图片 75

    以下其余的demo默认上面的CSS样式已引用包括进去,在此基础上只提供额外的类供用户追加以实现不同的功能。

     

    二、视区内(Within Viewport)

     

    想让内容块一直停留在可视区域内?将内容块设置为position:fixed;并设置一个较大的z-index层叠属性值。

    [css] view plain copy

     

    1. .Absolute-Center.is-Fixed {  
    2.   position: fixed;  
    3.   z-index: 999;  
    4. }  

     

    图片 76

    注意:对MobileSafari,若内容块不是放在设置为position:relative;的父容器中,内容块将垂直居中于整个文档,而不是可视区域内垂直居中。

     

    二、视区内(Within Viewport)

     

    想让内容块一直停留在可视区域内?将内容块设置为position:fixed;并设置一个较大的z-index层叠属性值。

    [css] view plain copy

     

    1. .Absolute-Center.is-Fixed {  
    2.   position: fixed;  
    3.   z-index: 999;  
    4. }  

     

    图片 77

    注意:对MobileSafari,若内容块不是放在设置为position:relative;的父容器中,内容块将垂直居中于整个文档,而不是可视区域内垂直居中。

     

    三、边栏 (Offsets)

     

    如果你要设置一个固顶的头或增加其他的边栏,只需要在内容块的样式中加入像这样的CSS样式代码:top:70px;bottom:auto;由于已经声明了margin:auto;,该内容块将会垂直居中于你通过top,left,bottom和right属性定义的边界框内。

    你可以将内容块固定与屏幕的左侧或右侧,并且保持内容块垂直居中。使用right:0;left:auto;固定于屏幕右侧,使用left:0;right:auto;固定与屏幕左侧。

    [css] view plain copy

     

    1. .Absolute-Center.is-Right {  
    2.   left: auto; right: 20px;  
    3.   text-align: right;  
    4. }  
    5.   
    6. .Absolute-Center.is-Left {  
    7.   right: auto; left: 20px;  
    8.   text-align: left;  
    9. }  

     

    图片 78

     

    三、边栏 (Offsets)

     

    如果你要设置一个固顶的头或增加其他的边栏,只需要在内容块的样式中加入像这样的CSS样式代码:top:70px;bottom:auto;由于已经声明了margin:auto;,该内容块将会垂直居中于你通过top,left,bottom和right属性定义的边界框内。

    你可以将内容块固定与屏幕的左侧或右侧,并且保持内容块垂直居中。使用right:0;left:auto;固定于屏幕右侧,使用left:0;right:auto;固定与屏幕左侧。

    [css] view plain copy

     

    1. .Absolute-Center.is-Right {  
    2.   left: auto; right: 20px;  
    3.   text-align: right;  
    4. }  
    5.   
    6. .Absolute-Center.is-Left {  
    7.   right: auto; left: 20px;  
    8.   text-align: left;  
    9. }  

     

    图片 79

     

    四、响应式/自适应(Responsive)

     

    绝对居中最大的优势应该就是对百分比形式的宽高支持的非常完美。甚至min-width/max-width 和min-height/max-height这些属性在自适应盒子内的表现也和预期很一致。

    图片 80

    [css] view plain copy

     

    1. .Absolute-Center.is-Responsive {  
    2.   width: 60%;   
    3.   height: 60%;  
    4.   min-width: 200px;  
    5.   max-width: 400px;  
    6.   padding: 40px;  
    7. }  

     

    给内容块元素加上padding也不影响内容块元素的绝对居中实现。

    四、响应式/自适应(Responsive)

     

    绝对居中最大的优势应该就是对百分比形式的宽高支持的非常完美。甚至min-width/max-width 和min-height/max-height这些属性在自适应盒子内的表现也和预期很一致。

    图片 81

    [css] view plain copy

     

    1. .Absolute-Center.is-Responsive {  
    2.   width: 60%;   
    3.   height: 60%;  
    4.   min-width: 200px;  
    5.   max-width: 400px;  
    6.   padding: 40px;  
    7. }  

     

    给内容块元素加上padding也不影响内容块元素的绝对居中实现。

    五、 溢出情况(Overflow)

    内容高度大于块元素或容器(视区viewport或设为position:relative的父容器)会溢出,这时内容可能会显示到块与容器的外面,或者被截断出现显示不全(分别对应内容块overflow属性设置为visible和hidden的表现)。

    加上overflow: auto会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界。

    [css] view plain copy

     

    1. .Absolute-Center.is-Overflow {  
    2.   overflow: auto;  
    3. }  

    图片 82

    如果内容块自身不设置任何padding的话,可以设置max-height: 100%;来保证内容高度不超越容器高度。

    五、 溢出情况(Overflow)

    内容高度大于块元素或容器(视区viewport或设为position:relative的父容器)会溢出,这时内容可能会显示到块与容器的外面,或者被截断出现显示不全(分别对应内容块overflow属性设置为visible和hidden的表现)。

    加上overflow: auto会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界。

    [css] view plain copy

     

    1. .Absolute-Center.is-Overflow {  
    2.   overflow: auto;  
    3. }  

    图片 83

    如果内容块自身不设置任何padding的话,可以设置max-height: 100%;来保证内容高度不超越容器高度。

    六、重绘(Resizing)

    你可以使用其他class类或javascript代码来重绘内容块同时保证居中,无须手动重新计算中心尺寸。当然,你也可以添加resize属性来让用户拖拽实现内容块的重绘。

    绝对居中(Absolute Centering)可以保证内容块始终居中,无论内容块是否重绘。可以通过设置min-/max-来根据自己需要限制内容块的大小,并防止内容溢出窗口/容器。

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Resizable {  
    2.   min-width: 20%;  
    3.   max-width: 80%;  
    4.   min-height: 20%;  
    5.   max-height: 80%;  
    6.   resize: both;  
    7.   overflow: auto;  
    8. }  

    图片 84

     

    如果不使用resize:both属性,可以使用CSS3动画属性transition来实现重绘的窗口之间平滑的过渡。一定要设置overflow:auto;以防重绘的内容块尺寸小于内容的实际尺寸这种情况出现。

    绝对居中(AbsoluteCentering)是唯一支持resize:both属性实现垂直居中的技术。

    注意:

    1. 要设置max-width/max-height属性来弥补内容块padding,否则可能溢出。
    2. 手机浏览器和IE8-IE10浏览器不支持resize属性,所以如果对你来说,这部分用户体验很必要,务必保证对resizing你的用户有可行的退路。
    3. 联合使用resize 和 transition属性会在用户重绘时,产生一个transition动画延迟时间。

     

    六、重绘(Resizing)

    你可以使用其他class类或javascript代码来重绘内容块同时保证居中,无须手动重新计算中心尺寸。当然,你也可以添加resize属性来让用户拖拽实现内容块的重绘。

    绝对居中(Absolute Centering)可以保证内容块始终居中,无论内容块是否重绘。可以通过设置min-/max-来根据自己需要限制内容块的大小,并防止内容溢出窗口/容器。

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Resizable {  
    2.   min-width: 20%;  
    3.   max-width: 80%;  
    4.   min-height: 20%;  
    5.   max-height: 80%;  
    6.   resize: both;  
    7.   overflow: auto;  
    8. }  

    图片 85

     

    如果不使用resize:both属性,可以使用CSS3动画属性transition来实现重绘的窗口之间平滑的过渡。一定要设置overflow:auto;以防重绘的内容块尺寸小于内容的实际尺寸这种情况出现。

    绝对居中(AbsoluteCentering)是唯一支持resize:both属性实现垂直居中的技术。

    注意:

    1. 要设置max-width/max-height属性来弥补内容块padding,否则可能溢出。
    2. 手机浏览器和IE8-IE10浏览器不支持resize属性,所以如果对你来说,这部分用户体验很必要,务必保证对resizing你的用户有可行的退路。
    3. 联合使用resize 和 transition属性会在用户重绘时,产生一个transition动画延迟时间。

     

    七、图片(Images)

     

    绝对居中(AbsoluteCentering)也适用于图片。对图片自身应用class类或CSS样式,并给图片添加height:auto样式,图片会自适应居中显示,如果外层容器可以resize则随着容器的重绘,图片也相应重绘,始终保持居中。

    需要注意的是height:auto虽然对图片居中有用,但如果是在图片外层的内容块上应用了height:auto则会产生一些问题:规则的内容块会被拉伸填充整个容器。这时,我们可以使用可变高度(Variable Height)方式解决这个问题。问题的原因可能是渲染图片时要计算图片高度,这就如同你自己定义了图片高度一样,浏览器得到了图片高度就不会像其他情况一样去解析margin:auto垂直居中了。所以我们最好对图片自身应用这些样式而不是父元素。

    图片 86

     

    HTML:

    [html] view plain copy

     

    1. <img src="" class="Absolute-Center is-Image" alt="" />  

    CSS:

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Image {  
    2.   height: auto;  
    3. }  
    4.   
    5. .Absolute-Center.is-Image img {   
    6.   width: 100%;  
    7.   height: auto;  
    8. }  

    最好是对图片自身应用此方法,效果如下图:

    图片 87

     

     

    七、图片(Images)

     

    绝对居中(AbsoluteCentering)也适用于图片。对图片自身应用class类或CSS样式,并给图片添加height:auto样式,图片会自适应居中显示,如果外层容器可以resize则随着容器的重绘,图片也相应重绘,始终保持居中。

    需要注意的是height:auto虽然对图片居中有用,但如果是在图片外层的内容块上应用了height:auto则会产生一些问题:规则的内容块会被拉伸填充整个容器。这时,我们可以使用可变高度(Variable Height)方式解决这个问题。问题的原因可能是渲染图片时要计算图片高度,这就如同你自己定义了图片高度一样,浏览器得到了图片高度就不会像其他情况一样去解析margin:auto垂直居中了。所以我们最好对图片自身应用这些样式而不是父元素。

    图片 88

     

    HTML:

    [html] view plain copy

     

    1. <img src="" class="Absolute-Center is-Image" alt="" />  

    CSS:

     

    [css] view plain copy

     

    1. .Absolute-Center.is-Image {  
    2.   height: auto;  
    3. }  
    4.   
    5. .Absolute-Center.is-Image img {   
    6.   width: 100%;  
    7.   height: auto;  
    8. }  

    最好是对图片自身应用此方法,效果如下图:

    图片 89

     

     

    八、可变高度(Variable Height)

     

    这种情况下实现绝对居中(AbsoluteCentering)必须要声明一个高度,不管你是基于百分比的高度还是通过max-height控制的高度,还有,别忘了设置合适的overflow属性。对自适应/响应式情景,这种方法很不错。

    与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高,内容块都会保持居中。这种方法在一些浏览器(如IE/FireFox)上会有问题,我的搭档Kalley 

    在ELL Creative(访问ellcreative.com )上写了一个基于Modernizr插件的检测函数,用来检测浏览器是否支持这种居中方法,进一步增强用户体验。

    Javascript:

     

    [javascript] view plain copy

     

    1. /* Modernizr Test for Variable Height Content */  
    2. Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {  
    3.   Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);  
    4. });  

    CSS:

     

     

    [css] view plain copy

     

    1. .absolutecentercontent .Absolute-Center.is-Variable {  
    2.   display: table;  
    3.   height: auto;  
    4. }  

    图片 90

     

    缺点:

    浏览器兼容性不太好,若Modernizr不能满足你的需求,你需要寻找其他方法解决。

    1.      与上述重绘(Resizing)情况的方法不兼容

    2.      Firefox/IE8:使用display:table会使内容块垂直居上,不过水平还是居中的。

    3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

    4.      Mobile Safari:内容块垂直居中;若使用百分比宽度,水平方向居中会稍微偏离中心位置。

     

     

    八、可变高度(Variable Height)

     

    这种情况下实现绝对居中(AbsoluteCentering)必须要声明一个高度,不管你是基于百分比的高度还是通过max-height控制的高度,还有,别忘了设置合适的overflow属性。对自适应/响应式情景,这种方法很不错。

    与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高,内容块都会保持居中。这种方法在一些浏览器(如IE/FireFox)上会有问题,我的搭档Kalley 

    在ELL Creative(访问ellcreative.com )上写了一个基于Modernizr插件的检测函数,用来检测浏览器是否支持这种居中方法,进一步增强用户体验。

    Javascript:

     

    [javascript] view plain copy

     

    1. /* Modernizr Test for Variable Height Content */  
    2. Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {  
    3.   Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);  
    4. });  

    CSS:

     

     

    [css] view plain copy

     

    1. .absolutecentercontent .Absolute-Center.is-Variable {  
    2.   display: table;  
    3.   height: auto;  
    4. }  

    图片 91

     

    缺点:

    浏览器兼容性不太好,若Modernizr不能满足你的需求,你需要寻找其他方法解决。

    1.      与上述重绘(Resizing)情况的方法不兼容

    2.      Firefox/IE8:使用display:table会使内容块垂直居上,不过水平还是居中的。

    3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

    4.      Mobile Safari:内容块垂直居中;若使用百分比宽度,水平方向居中会稍微偏离中心位置。

     

     

    Ⅱ.其他居中实现技术

     

    绝对居中(Absolute Centering)是一种非常不错的技术,除此之外还有一些方法可以满足更多的具体需求,最常见的推荐:NegativeMargins, Transforms,Table-Cell, Inline-Block方式和新出现的Flexbox.方式。这些方法许多文章都有深入讲解,这里只做简单阐述。

     

    Ⅱ.其他居中实现技术

     

    绝对居中(Absolute Centering)是一种非常不错的技术,除此之外还有一些方法可以满足更多的具体需求,最常见的推荐:NegativeMargins, Transforms,Table-Cell, Inline-Block方式和新出现的Flexbox.方式。这些方法许多文章都有深入讲解,这里只做简单阐述。

     

    九、负外边距(Negative Margins)

     

    这或许是当前最流行的使用方法。如果块元素尺寸已知,可以通过以下方式让内容块居中于容器显示:

    外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding,)的一半,再加上top: 50%; left: 50%;。即:

     

    [css] view plain copy

     

    1. .is-Negative {  
    2.         width: 300px;  
    3.         height: 200px;  
    4.         padding: 20px;  
    5.         position: absolute;  
    6.         top: 50%; left: 50%;  
    7.         margin-left: -170px; /* (width   padding)/2 */  
    8.         margin-top: -120px; /* (height   padding)/2 */  
    9. }  

     

    图片 92

     

    测试表明,这是唯一在IE6-IE7上也表现良好的方法。

    优点:

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

    2.      代码量少。

    缺点:

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

    2.      内容可能溢出容器。

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

     

    九、负外边距(Negative Margins)

     

    这或许是当前最流行的使用方法。如果块元素尺寸已知,可以通过以下方式让内容块居中于容器显示:

    外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding,)的一半,再加上top: 50%; left: 50%;。即:

     

    [css] view plain copy

     

    1. .is-Negative {  
    2.         width: 300px;  
    3.         height: 200px;  
    4.         padding: 20px;  
    5.         position: absolute;  
    6.         top: 50%; left: 50%;  
    7.         margin-left: -170px; /* (width   padding)/2 */  
    8.         margin-top: -120px; /* (height   padding)/2 */  
    9. }  

     

    图片 93

     

    测试表明,这是唯一在IE6-IE7上也表现良好的方法。

    优点:

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

    2.      代码量少。

    缺点:

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

    2.      内容可能溢出容器。

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

     

    十、变形(Transforms)

     

    这是最简单的方法,不近能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀,还要加上

    top: 50%; left: 50%;

    代码类:

     

    [css] view plain copy

     

    1. .is-Transformed {   
    2.   width: 50%;  
    3.   margin: auto;  
    4.   position: absolute;  
    5.   top: 50%; left: 50%;  
    6.   -webkit-transform: translate(-50%,-50%);  
    7.       -ms-transform: translate(-50%,-50%);  
    8.           transform: translate(-50%,-50%);  
    9. }  

     

    图片 94

     

    优点:

    1.      内容可变高度

    2.      代码量少

    缺点:

    1.      IE8不支持

    2.      属性需要写浏览器厂商前缀

    3.      可能干扰其他transform效果

    4.      某些情形下会出现文本或元素边界渲染模糊的现象

    进一步了解transform实现居中的知识可以参考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

     

    十、变形(Transforms)

     

    这是最简单的方法,不近能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀,还要加上

    top: 50%; left: 50%;

    代码类:

     

    [css] view plain copy

     

    1. .is-Transformed {   
    2.   width: 50%;  
    3.   margin: auto;  
    4.   position: absolute;  
    5.   top: 50%; left: 50%;  
    6.   -webkit-transform: translate(-50%,-50%);  
    7.       -ms-transform: translate(-50%,-50%);  
    8.           transform: translate(-50%,-50%);  
    9. }  

     

    图片 95

     

    优点:

    1.      内容可变高度

    2.      代码量少

    缺点:

    1.      IE8不支持

    2.      属性需要写浏览器厂商前缀

    3.      可能干扰其他transform效果

    4.      某些情形下会出现文本或元素边界渲染模糊的现象

    进一步了解transform实现居中的知识可以参考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

     

    十一、表格单元格(Table-Cell)

     

    总的说来这可能是最好的居中实现方法,因为内容块高度会随着实际内容的高度变化,浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记,需要三层元素让最内层的元素居中。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Table">  
    2.   <div class="Table-Cell">  
    3.     <div class="Center-Block">  
    4.     <!-- CONTENT -->  
    5.     </div>  
    6.   </div>  
    7. </div>  

    CSS:

     

    [css] view plain copy

     

    1. .Center-Container.is-Table { display: table; }  
    2. .is-Table .Table-Cell {  
    3.   display: table-cell;  
    4.   vertical-align: middle;  
    5. }  
    6. .is-Table .Center-Block {  
    7.   width: 50%;  
    8.   margin: 0 auto;  
    9. }  

     

    图片 96

     

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      跨浏览器兼容性好。

    缺点:

    需要额外html标记

    了解更多表格单元格实现居中的知识,请参考Roger Johansson发表在456bereastreet的文章《Flexibleheight vertical centering with CSS, beyond IE7》

     

     

    十一、表格单元格(Table-Cell)

     

    总的说来这可能是最好的居中实现方法,因为内容块高度会随着实际内容的高度变化,浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记,需要三层元素让最内层的元素居中。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Table">  
    2.   <div class="Table-Cell">  
    3.     <div class="Center-Block">  
    4.     <!-- CONTENT -->  
    5.     </div>  
    6.   </div>  
    7. </div>  

    CSS:

     

    [css] view plain copy

     

    1. .Center-Container.is-Table { display: table; }  
    2. .is-Table .Table-Cell {  
    3.   display: table-cell;  
    4.   vertical-align: middle;  
    5. }  
    6. .is-Table .Center-Block {  
    7.   width: 50%;  
    8.   margin: 0 auto;  
    9. }  

     

    图片 97

     

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      跨浏览器兼容性好。

    缺点:

    需要额外html标记

    了解更多表格单元格实现居中的知识,请参考Roger Johansson发表在456bereastreet的文章《Flexibleheight vertical centering with CSS, beyond IE7》

     

     

    十二、行内块元素(Inline-Block)

     

    很受欢迎的一种居中实现方式,基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。这个概念的解释可以参考CSS-Tricks上的文章《Centering in the Unknown》

    我这个例子也有一些其他地方见不到的小技巧,有助于解决一些小问题。

    如果内容块宽度大于容器宽度,比如放了一个很长的文本,但内容块宽度设置最大不能超过容器的100%减去0.25em,否则使用伪元素:after内容块会被挤到容器顶部,使用:before内容块会向下偏移100%。

    如果你的内容块需要占据尽可能多的水平空间,可以使用max-width: 99%;(针对较大的容器)或max-width: calc(100% -0.25em)(取决于支持的浏览器和容器宽度)。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Inline">  
    2.   <div class="Center-Block">  
    3.     <!-- CONTENT -->  
    4.   </div>  
    5. </div>  

    CSS:

     

     

    [css] view plain copy

     

    1. .Center-Container.is-Inline {   
    2.   text-align: center;  
    3.   overflow: auto;  
    4. }  
    5.   
    6. .Center-Container.is-Inline:after,  
    7. .is-Inline .Center-Block {  
    8.   display: inline-block;  
    9.   vertical-align: middle;  
    10. }  
    11.   
    12. .Center-Container.is-Inline:after {  
    13.   content: '';  
    14.   height: 100%;  
    15.   margin-left: -0.25em; /* To offset spacing. May vary by font */  
    16. }  
    17.   
    18. .is-Inline .Center-Block {  
    19.   max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
    20.   /* max-width: calc(100% - 0.25em) /* Only for IE9  */   
    21. }  

     

     

    这种方法的优劣和单元格Table-Cell方式差不多,起初我把这种方式忽略掉了,因为这确实是一种hack方法。不过,无论如何,这是很流行的一种用法,浏览器支持的也很好。

    图片 98

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      支持跨浏览器,也适应于IE7。

    缺点:

    1.需要一个容器

    2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

    3.内容块宽度不能超过容器的100% - 0.25em。

     

    更多相关知识参考ChrisCoyier的文章《Centeringin the Unknown》

    十二、行内块元素(Inline-Block)

     

    很受欢迎的一种居中实现方式,基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。这个概念的解释可以参考CSS-Tricks上的文章《Centering in the Unknown》

    我这个例子也有一些其他地方见不到的小技巧,有助于解决一些小问题。

    如果内容块宽度大于容器宽度,比如放了一个很长的文本,但内容块宽度设置最大不能超过容器的100%减去0.25em,否则使用伪元素:after内容块会被挤到容器顶部,使用:before内容块会向下偏移100%。

    如果你的内容块需要占据尽可能多的水平空间,可以使用max-width: 99%;(针对较大的容器)或max-width: calc(100% -0.25em)(取决于支持的浏览器和容器宽度)。

    HTML:

     

    [html] view plain copy

     

    1. <div class="Center-Container is-Inline">  
    2.   <div class="Center-Block">  
    3.     <!-- CONTENT -->  
    4.   </div>  
    5. </div>  

    CSS:

     

     

    [css] view plain copy

     

    1. .Center-Container.is-Inline {   
    2.   text-align: center;  
    3.   overflow: auto;  
    4. }  
    5.   
    6. .Center-Container.is-Inline:after,  
    7. .is-Inline .Center-Block {  
    8.   display: inline-block;  
    9.   vertical-align: middle;  
    10. }  
    11.   
    12. .Center-Container.is-Inline:after {  
    13.   content: '';  
    14.   height: 100%;  
    15.   margin-left: -0.25em; /* To offset spacing. May vary by font */  
    16. }  
    17.   
    18. .is-Inline .Center-Block {  
    19.   max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
    20.   /* max-width: calc(100% - 0.25em) /* Only for IE9  */   
    21. }  

     

     

    这种方法的优劣和单元格Table-Cell方式差不多,起初我把这种方式忽略掉了,因为这确实是一种hack方法。不过,无论如何,这是很流行的一种用法,浏览器支持的也很好。

    图片 99

    优点:

    1.      高度可变

    2.      内容溢出会将父元素撑开。

    3.      支持跨浏览器,也适应于IE7。

    缺点:

    1.需要一个容器

    2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

    3.内容块宽度不能超过容器的100% - 0.25em。

     

    更多相关知识参考ChrisCoyier的文章《Centeringin the Unknown》

    十三、Flexbox

     

    这是CSS布局未来的趋势。Flexbox是CSS3新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with Flexbox》

    记住Flexbox不只是用于居中,也可以分栏或者解决一些令人抓狂的布局问题。

    图片 100

    优点:

    1.内容块的宽高任意,优雅的溢出。

    2.可用于更复杂高级的布局技术中。

    缺点:

    1.      IE8/IE9不支持。

    2.      Body需要特定的容器和CSS样式。

    3.      运行于现代浏览器上的代码需要浏览器厂商前缀。

    4.      表现上可能会有一些问题

    有关Flexbox Centering的文章可以参考David Storey的文章《Designing CSS Layouts WithFlexbox Is As Easy As Pie》

     

    建议:

    每种技术都有其优劣之处。你选择哪一种技术取决于支持的浏览器和你的编码。使用上面的对照表有助于你做出决定。

    作为一种简单的替代方案,绝对居中(Absolute Centering)技术表现良好。曾经你使用负边距(Negative Margins)的地方,现在可以用绝对居中(Absolute Centering)替代了。你不再需要处理讨厌的边距计算和额外的标记,而且还能让内容块自适应大小居中。

    如果你的站点需要可变高度的内容,可以试试单元格(Table-Cell)和行内块元素(Inline-Block)这两种方法。如果你处在流血的边缘,试试Flexbox,体验一下这一高级布局技术的好处吧。

    十三、Flexbox

     

    这是CSS布局未来的趋势。Flexbox是CSS3新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with Flexbox》

    记住Flexbox不只是用于居中,也可以分栏或者解决一些令人抓狂的布局问题。

    图片 101

    优点:

    1.内容块的宽高任意,优雅的溢出。

    2.可用于更复杂高级的布局技术中。

    缺点:

    1.      IE8/IE9不支持。

    2.      Body需要特定的容器和CSS样式。

    3.      运行于现代浏览器上的代码需要浏览器厂商前缀。

    4.      表现上可能会有一些问题

    有关Flexbox Centering的文章可以参考David Storey的文章《Designing CSS Layouts WithFlexbox Is As Easy As Pie》

     

    建议:

    每种技术都有其优劣之处。你选择哪一种技术取决于支持的浏览器和你的编码。使用上面的对照表有助于你做出决定。

    作为一种简单的替代方案,绝对居中(Absolute Centering)技术表现良好。曾经你使用负边距(Negative Margins)的地方,现在可以用绝对居中(Absolute Centering)替代了。你不再需要处理讨厌的边距计算和额外的标记,而且还能让内容块自适应大小居中。

    如果你的站点需要可变高度的内容,可以试试单元格(Table-Cell)和行内块元素(Inline-Block)这两种方法。如果你处在流血的边缘,试试Flexbox,体验一下这一高级布局技术的好处吧。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:如何只用CSS做到完全居中,实现垂直居中水平居

    关键词:

上一篇:新葡亰496net:开始编写CSS

下一篇:没有了