div 수평 수직으로 당신을 맞추는 몇 가지 방식을 실현합니다

div를 수직으로 가운데에 배치하는 몇 가지 방법:
1. 첫 번째
부모div 높이 너비 고정, 상대적 포지셔닝;하위 div 높이 너비 고정, 절대 포지셔닝.top:50% 사용하기;left:50%;margin-left:-200px;margin-top:-150px;수평 수직 가운데를 이루다.
단점은 서브div가 문서 흐름에서 벗어나는 것이다

.my-div{
    border:1px solid red;
    width:400px;
    height:300px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-150px;
    // transform: translate(-50%, -50%); //        margin-left:-200px  margin-top:-150px
}


    

         div      ，    ； div      ，    。  top:50%;left:50%;margin-left:-200px;margin-top:-150px;        。
    
    

           div2
    

2. 두 번째
부모div 높이 너비 고정, 상대적 포지셔닝;자div의 높이 폭이 일정하지 않고 절대적으로 위치를 정하며 top:50%를 사용합니다.left:50%; transform: translate(-50%, -50%);수평 수직 가운데를 이루다.
단점은 서브div가 문서 흐름에서 벗어나는 것이다

.my-div{
    border:1px solid red;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}


    

        div      ，    ； div      ，    ，  top:50%;left:50%; transform: translate(-50%, -50%);        
    
    

           div2
    

3. 제3종
부모div 높이 너비 고정, 상대적 포지셔닝;자div 높이의 폭이 일정하지 않고 절대적으로 위치를 정한다.left:0 사용하기;top: 0;bottom: 0;right: 0;margin: auto;수평 수직 가운데를 이루다.
단점은 서브div가 문서 흐름에서 벗어나는 것이다

.my-div{
    width: 400px;
    height: 200px;
    border:1px solid red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}


    

         div      ，    ； div      ，    ；   left:0;top: 0;bottom: 0;right: 0;margin: auto;        
    
    

           div2
    

4, 네 번째
부모div 높이 너비 고정;서브div 높이 너비 고정/고정하지 않음;flex 레이아웃을 사용하여 수평 수직 가운데를 설정합니다.하위 div가 문서 흐름에서 벗어나지 않았습니다. 파이프 div 높이의 폭이 고정되었는지 여부 없이 수평 가운데를 실현할 수 있습니다
단점은 ie10+만이 flex 레이아웃을 사용하여 수평 수직 가운데를 지원하는 것이다

.box{
    width:800px;
    height:600px;
    border:1px solid blue;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
}
.my-div{
    border:1px solid red;
}  


    

         div      ； div      /   ，  flex          。 div      
    

5, 다섯 번째
부모div 높이 너비 고정, 상대적 포지셔닝;서브div 높이 너비 고정, 절대 포지셔닝,calc 함수 동적 계산을 사용하여 수평 수직 가운데를 실현한다.
단점은 하위 div가 문서 흐름을 벗어나지 않았다는 것입니다

.box{
    width: 800px;
    height: 600px;
    border: 1px solid blue;
    position: relative;
}
.my-div{
    position: absolute;
    width: 400px;
    height: 200px;
    left:-webkit-calc((800px - 400px)/2);
    top:-webkit-calc((600px - 200px)/2);
    left:-moz-calc((800px - 400px)/2);
    top:-moz-calc((600px - 200px)/2);
    left:calc((800px - 400px)/2);
    top:calc((600px - 200px)/2);
    border:1px solid red;
}　


    

         div      ,    ； div      ，    ，  calc              。  div      
    

6, 여섯 번째
부모div는 높이가 고정되거나 고정되지 않으며 자식div는 높이의 폭을 설정할 수 없으며 수평 수직 가운데를 실현한다. 이 방식은 주로 문자 내용의 수평 수직 가운데를 대상으로 한다.(주: 자div를 제거하거나 자div 대신 p를 사용하면 텍스트 내용을 수평으로 수직으로 가운데에 놓을 수 있습니다)

 .box {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
     width: 800px;
     height: 600px;
     border:1px solid #666;
   }
   .my-div{
     /*width: 400px;*/
     /*height: 200px;*/
     border: 1px solid blue;
   }


 

    div    /   ， div        ，        ，                   。（ ：   div  p   div               ）