css中的居中

[ivan135]

1.单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可 若文字长度超出盒子的宽度，可以使用overflow:hidden隐藏超出的宽度

2. (未知高度）多行文本垂直居中

• 设置上下的padding值一样即可并,若是宽度可以拉伸，就无法水平居中如：

  div{
   padding:25px; 
  } 

  3. (未知高度）多行文本垂直水平居中

• Flex布局

  缺点：子元素的float、clear和vertical-align属性将失效，有兼容性问题(兼容到IE11+） 只需要在父盒子设置：display: flex; justify-content:（平行方向） center;align-items: center（垂直方向）; 就可以达到垂直水平居中

• relative+absolute+transform 水平垂直居中

  
  <div class="parent">
  <div class="child">Demo</div>
  </div>

说明left和top相对父元素，transform是对自身的影响   
兼容性较好，用于轮播图的圆点

- ### relative+absolute + 负 margin

.parent{ position:relative; } .child{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; }

缺点：需要确定子元素宽高

- ### 绝对定位方式+四个方向置0
子元素可以是块级元素也可以是行内元素，没有影响

.parent{ position:relative } .child{ margin:auto; height: 100px; width: 100px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

缺点：同样是需要确定子元素宽高
说明绝对居中（AbsoluteCentering）的工作机理可以阐述如下：
1、在普通内容流（normal content flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。
2、position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。
3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器。
4、 给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto
5、由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。
这么看来， margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的，所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。