전단 면접에서 직면한 수직 거중 문제

1. flex 레이아웃 방법: 현재 div의 부모에 flex css 스타일을 추가합니다

            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;

2. 절대 포지셔닝 방법: 현재div의 너비와 높이를 확정하지 못하고transform:translate(-50%,-50%)를 사용한다.현재div의 부모에 상대적인 위치를 추가합니다 (position:relative;)

 background: green;       
 position: absolute;      
 left: 50%;          
 top: 50%;        
 transform: translate(-50%,-50%);

3. 절대 포지셔닝 방법: 현재div의 폭을 확정하고margin값은 현재div의 폭의 절반의 마이너스값이다

 .father {
            background: red;
            position: relative;
            width: 500px;
            height: 500px;
        }
        .son {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }

4. 절대 포지셔닝 방법: 절대 포지셔닝 아래 top left right bottom은 모두 0으로 설정하고margin은 auto로 설정한다.

.father {
            background: red;
            position: relative;
            width: 500px;
            height: 500px;
        }
        .son {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

5.table-cell은 수평 수직 가운데를 실현한다. table-cell middle center 조합은 (하위 요소는 블록급 요소가 될 수 없다) 자div는 블록형 요소만 가능하고 그렇지 않으면 수직 가운데만 가능하며 수평 가운데는 불가능하다.

/*table-cell、vertical-align、text-align    */
      
        .father {
            width: 500px;
            height: 500px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            background-color: red;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: green;
            display: inline-block;