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的浏览器可用，但是浏览器厂商的属性各异，导致前缀眼花缭乱