css垂直水平居中的N种方式

[iwalking11]

html及css基础系列----css垂直水平居中

1. 单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可

2. 多行未知高度div的垂直居中

• 使用Flex

只需要在父盒子设置：display: flex; justify-content:（平行方向） center;align-items: center（垂直方向）; 就可以达到垂直水平居中
缺点：有兼容性问题

• 使用 display:table-cell 方法

父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
（父盒子外面需要再套一个div{display:table}）

• absolute+transform 水平垂直居中

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

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

• relative+absolute + negative 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;(非static)的容器。
4、 给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto
5、由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。
这么看来， margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的，所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。

参考：
关于css水平垂直居中的总结
CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

[iwalking11]

改变CSS世界纵横规则的writing-mode属性介绍了writing-mode属性，
利用
writing-mode: vertical-lr;
text-align: center;
也可以实现垂直居中的效果

优点：

• 上下左右居中
• 纯css实现
• 无定位
• 居中元素不需要设置宽高
• 适应性超强
  -兼容ie8

写了个demo
效果图：

[iwalking11]

摘自：CSS实现水平垂直居中的1010种方式