css-----居中

line-height垂直居中只能用于inline和inline-block方式

vertical:middle也是只能用于inline-block元素

对于display：block的元素的垂直居中使用margin：auto 0  和flex 和table-cell;其中margin：auto用于高度固定的子div,   flex 和table-cell用于高度固定或者不固定的div

设置水平居中也是，使用margin：0 auto 必须以设置了宽度为前提，不然不生效

一：将一个div放到外层div的中间 水平垂直居中

<div class="parent">
   <div class="child">第一种方法</div>
</div>

四种方法：

 .parent { 
          width:800px; 
          height:500px; 
          border:2px solid #000; 
          position:relative; 
          } 
         .child { 
            width:200px; 
            height:200px; 
            margin: auto;   
            position: absolute;   
            top: 0; left: 0; bottom: 0; right: 0;  
            background-color: red; 
         }  
   
   
        .parent{ 
            width:800px; 
            height:500px; 
            border:2px solid #000; 
            display:table-cell; 
            vertical-align:middle; 
            text-align: center; 
        } 
        .child{ 
            width:200px; 
            height:200px; 
            display:inline-block; 
            background-color: red; 
        }  
  
  
  .parent{ 
            width:800px; 
            height:500px; 
            border:2px solid #000; 
            display:flex; 
            justify-content:center; 
            align-items:center; 
        } 
        .child{ 
            width:200px; 
            height:200px; 
            background-color: red; 
        } 
  
  
   .parent{ 
            width:800px; 
            height:500px; 
            border:2px solid #000; 
            position:relative; 
        }
        .child{ 
            width:300px; 
            height:200px; 
            margin:auto; 
            position:absolute;/*设定水平和垂直偏移父元素的50%， 
再根据实际长度将子元素上左挪回一半大小*/ 
            left:50%; 
            top:50%; 
            margin-left: -150px; 
            margin-top:-100px; 
            background-color: red; 
        }  

二、一个DIV中文字居中

1. div{text-align:center} 

三、使得整个页面居中对齐

首先我们要对body设置css内容居中样式（css text-align:center），然后布局最外层DIV盒子时候使用 margin:0 auto即可让对象布局居中。意思是让对象上下间隔为0，左右间隔自动，随对象宽度左右间隔自动

四、垂直居中中line-height

在一排的文字或内容布局中，如果要让内容上下垂直居中，我们只需要设置line-height与height高度相同高度长度与html单位即可实现垂直居中；如果是多列的或文章内容通常我们会设置每行文字一定平均上下间隔，这个时候我们只需要设置line-height行高即可。