css中实现垂直居中

我们都清楚元素相对于父级水平居中的方法：对于inline元素，为父级设置text-align: center。对于定宽的block元素，设定其margin: 0 auto 然而垂直居中的方法并没有这么简单

vertical align

第一个反应是实现垂直居中的方法应该是vertical-align: middle 该属性定义行内元素的基线的垂直对齐，在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式，这个方式确实直观有效，但其适用范围仅仅限于table cell中的内容

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

  .parent { display: table }

  .child { 
      display: table-cell;
      vertical-align: middle;
   }

line-height

该方法使用与单行文本或图片的垂直居中，我们需要做的仅仅是将line-height属性设置大于font-size，且等于容器的高度

   <div class = "parent">
       <div class="child">Text here</div>
   </div>

  .parent { 
      height: 200px; /*不必要*/
      line-height: 200px;
   }
   .child {
   }
   //也可以是
   .parent { 
      height: 200px; /*不必要*/
   }
   .child {
      line-height: 200px;
   }

可以看到单行文本垂直居中了，但是！如果是多行文本就非常尴尬了，因为这样做的原理是设置或继承了子元素的line-height，让它等于父容器的height，所以对多行文本不适用
图片也一样

   <div class = "parent">
       <img src="./sysuzhyupeng.png" class="child" />
   </div>

只是子元素要设置vertical-align调整基线位置

  .parent { 
      height: 200px; /*不必要*/
      line-height: 200px;
   }
   .child {
      vertical: middle; /*调整基线位置*/
   }

绝对定位+负Margin

这里通过绝对定位将目标元素左上角定位在父级元素接近中央位置，然后通过设定该元素的margin为负值来对准中心位置，这个使用于所有block元素

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

   .parent {
      position: relative;
   }
   .child {
       position: absolute;
       left: 50%;
       top: 50%;
       height: 30%;
       width: 50%;
       margin: -15% 0 0 -25%; /* margin为负值且为自身尺寸的一半*/
   }

然而，这种方法经常会出现父级容器中的内容溢出，所以最好在知道父级元素的宽度和高度时使用该方法。

绝对定位和transform3d

这个和上面方法差不多，只是把负margin改成设置目标元素的transform属性来对准中心位置，适用与所有block元素。

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

   .parent {
      position: relative;
   }
   .child {
       position: absolute;
       left: 50%;
       top: 50%;
       height: 30%;
       width: 50%;
       transform: translated3d(-50%, -50%, 0);
       /* 向左向上移动自身尺寸的一半 */
   }

这种方法的缺点是兼容性不好，IE8以下不支持

绝对定位四个方向暴力居中

通过给子元素设绝对定位并设置top, bottom, right和left为0，最后设 margin为auto，将元素拉伸后再让上下和左右margin相等，实现居中，适用于所有block元素

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

这种方法的缺点是兼容性不好，IE8以下不支持

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

CSS3中的Flex布局

将父级容器设置为Flex容器，并规定子项目的排列方式。

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

   .parent {
      position: flex;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      /* 子元素主轴(默认是水平轴)上居中 */
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-pack: center; /* IE10 */
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;/* 现代浏览器 */
      /* 子元素交叉轴(默认是纵轴)上居中 */
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-align: center;  /* IE10 */
      -webkit-align-content: center;
      -moz-align-item: center;
      align-items: center;
      height: 300px;
   }
   .child {
       width: 150px;
       height: 130px;
   }

支持CSS3的浏览器可用，但是浏览器厂商的属性各异，导致前缀眼花缭乱