html中div使用CSS实现水平/垂直居中的多种方式

CSS中的居中，在工作中，会经常遇到。它可以分为水平居中和垂直居中，以下是几种实现居中的方式。
以下例子中，涉及到的CSS属性值。

.parent-frame {
 
  width: 200px;
 
  height: 200px;
 
  border: 1px solid red;
 
}
 
.child-frame {
 
  width: 100px;
 
  height: 100px;
 
  border: 1px dotted blue;
 
}

1: text-align:center，水平居中
块状元素，水平居中

<div class="parent-frame">
 
  子元素水平居中
 
  <i style="display:block; text-align: center;color: blue">块状元素，水平居中</i>
 
</div>
子元素水平居中
块状元素，水平居中

2：margin: 0 auto，水平居中
水平居中。上下外边框距为0，左右外边距浏览器会自动计算平分

<div class="parent-frame">
  子元素水平居中
  <i class="child-frame" style="display: block;margin: 0 auto">块状元素，水平居中</i>
</div>

子元素水平居中
块状元素，水平居中

3：line-hei