css元素居中实现方法

标签：

关于css元素居中，查阅资料和实验有以下几种方法：

水平居中

1.最简单的在父元素中加入 text-align:center 。这条语句不用关心子元素是否有固定的尺寸大小。

但只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。

但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。

2.子元素宽度确定，可以使用 margin:0 auto 或者 margin-left:auto ; margin-right:auto

此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。

3.子元素宽度不确定，可以将子元素放在table中，将table设置为 margin:0 auto。

4.利用浮动居中，不需要知道该元素宽度

包裹子元素的盒子设置：position:relative;float:left;left:50% ( 此盒子不应设置尺寸)

子元素：position:relative;left:-50%

垂直居中

1.父元素高度不确定，在父元素中padding-top和padding-bottom实现上下居中。

注意：在子元素中使用margin-top和margin-bottom其实不能实现padding所实现的效果:

在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。
最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
相邻的盒模型中，如果其中的一个是浮动的，垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。
设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）。
设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
设置了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。

另：如果在子元素中设置padding-top padding-bottom ，也可以在视觉上达到同样的效果，但实际上这个div并没有垂直居中。

2.如果是父层高度确定的单行文字，把文字的line-height设为文字父容器的高度

3.父层高度确定的多行文本、图片、块级元素垂直居中

css 中有个用于垂直居中的属性 vertical-align，但只有在父层为 td 或者 th 时，这个属性才会生效，对于其他块级元素，例如 div、p 等，默认情况是不支持的。

在 firefox 和 ie8 下，可以设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，但 ie6,7 并不支持，所以这种方法没有办法跨浏览器兼容。但是我们可以使用 table。

全方位居中

1.子元素尺寸已知。

父元素设置：position:relative

对子元素设置 position:absolute;top:50%;margin-top:-heigt/2 px;left:50%;margin-left:-width/2 px; 

注意：

　　这是个非响应式的方法，不能使用百分比的大小，也不能设置min-/max-的最大值最小值。

　　内容可能会超出容器

　　需要为padding预留空间，或者需要使用box-sizing: border-box样式。

也可以写成： position:absolute;top:0;bottom:0;left:0;rght:0;margin:auto;

2.transform

子元素设置

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

3.table-cell

4.inline-block

5.flexbox 

参考资料

http://www.igooda.cn/jzjl/20131013387.html

css元素居中实现方法

标签：

原文地址：http://www.cnblogs.com/julyys/p/4569575.html