居中

1. 垂直居中

• 块状元素，利用盒子模型的padding属性，套一个父div，然 后通过计算父盒子高度和子盒子高度差，分配padding上下值

  // 根据可视区域高度，自适应居中
  const visibleHeight = $(window).height();
  $('.parent').height(visibleHeight);
  
  const $child = $('.child');
  let paddingVal = Math.floor((visibleHeight - $child.height()) / 2 / 2);
  $mainBox.css({ 'padding-top': `${paddingVal}px` });
  $mainBox.css({ 'padding-bottom': `${paddingVal}px` });

• 行内元素，设置line-height值与高度值一致，实现垂直居中，仅适用于单行文本

.text {
    display: inline-block;
    height: 20;
    line-height: 20px
}

2. 水平居中

• 行内元素 ，text-align: center
• 固定宽度的块状元素

 width: 200px;
 margin: 0 auto;