CSS를 수직 중앙에 배치하는 10가지 방법 공유

placeholder: 我是一个不正经的属性.
                                                                          ----题记

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.ex{
  width:100% ;
  height: 100px;
  background: #eee;
  text-align: center;
  margin: 10px 0;
}
.ex_1{
  background-color: lightgreen;
}
/* 本来想用多个, 后来考虑没什么用, 就留下了一个子元素 */

.ex > p{
  margin: 0 auto;
  width: 100px;
  height: 30px;
  line-height: 30px;
}

父元素设置{ display: flex; align-items: center; }

父元素设置{ display: flex; } 子元素设置{ align-self: center; }

该元素设置 { vertical-align: middle; }
/* 同时对应 text-bottom/text-top 为下对齐/上对齐 */

//xxx(请原谅我不想提他的名字), 竟然支持到了4.0 惊艳到我了

父元素相对定位(或其他定位){ position: relative; }
子元素绝对定位{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto }

父元素设置{ padding: xxpx; height: auto !important;/*替换了我的默认样式*/ }

    line-height/height设置为等值

父元素设置{ position: relative; }
中间元素{ position: absolute; top: 50%; left: 50%; }
子元素{ position: relative; top: -50%; left: -50% }

父元素设置{ display: box; box-pack: center; box-align: center; }

目前主流浏览器都不支持box-pack属性。
Internet Explorer 10 使用 -ms-flex-pack property 属性来代替支持。
Firefox通过私有属性- MOZ-box-pack支持。
Safari, Opera, 和 Chrome 通过私有属性 -webkit-box-pack 支持.
注意： Internet Explorer 9及更早IE版本不支持弹性框.

父元素设置{ position: relative; }
子元素设置{ position: absolute; top: 50%; left: 50%; transform: translate: (-50%, 50%) }