当前位置:Gxlcms > html代码 > CSS6种完全居中最佳实践(整理)_html/css_WEB-ITnose

CSS6种完全居中最佳实践(整理)_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:25人阅读

2016年4月28日

1.最佳法:

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

在线演示

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

    W3.org:?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 thus takes up no space

  3. 设置了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).

  4. 给元素设置了宽高以后,浏览器会阻止元素填满所有的空间,根据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; 样式渲染的规定,所以应当在与标准兼容的各种浏览器中起作用。

优点:

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

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


  • 2.负margin法:

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

    在线演示



    3.transform法:

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

    在线演示



    4.inner-block法:

    HTML:

    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+ */ }

    在线演示



    5.Flexbox法:

    .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上写样式,或者需要额外容器
  • 需要各种厂商前缀兼容现代浏览器
  • 可能有潜在的性能问题


  • 6.Table-cell法:

    HTML:

    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;}

    在线演示



    参考出处:

  • CodePen of shshaw
  • 伯乐在线
  • 人气教程排行