div 다양한 상황에서 가운데

여기에는 과거의 경험에 근거하여div가 중간에 있는 각종 상황을 총결하였으니 모두 나를 힘껏 두드려주세요~
1. 수평방향: 일반적인 상황에서 블록형 요소는 가운데에서div에 너비를 설정하고margin:0 auto를 추가한다.예를 들면 다음과 같습니다.

div{
	width:500px;
	height:300px;
	margin:0 atuo;
	background-color:pink;//     ，      
}

2. 수평 방향: 부동 요소의 가운데에서div에 너비, 높이를 설정하고 margin을 추가한다. 예를 들어 다음과 같다.

.div{
			  width:400px;
			  height:300px;
			  float:left;
              position:relative;
              margin:0 0 0 -200px;        
              background-color:pink;
              top:50%;
              left:50%;                   
    }

3. 수평 방향: 절대 위치의 원소는 가운데에 있다.

.div{
            width:400px;
            height:300px;
            background-color:pink;
            position:absolute;
            top:0;
            left:50%;
            margin-left:-200px;
	}

4. 수평방향: 부정확한 블록형 요소의 중간에 테이블 라벨을 넣고 디스플레이:inline을 설정하며position:relative와left:50%를 설정한다(이론적으로 가능하지만 이렇게 하는 것을 추천하지 않는다.table 라벨을 추가하면 일련의 문제가 발생할 수 있다)

.div{
            display:inline;
            position:relative;
            left:50%;
     }

5. 수평방향: 여러 개의 블록 요소의 가운데에서 요소의 디스플레이 속성을 inline-block으로 설정하고 부모 요소의 text-align 속성을center로 설정합니다.

.parent{
            text-align: center;
        }
.div{
            width:100px;
            height:100px;
            display:inline-block;
     }

6. 수평 가운데: 여러 개의 블록 요소 해결 방안(flexbox 레이아웃으로 실현)은 flexbox 레이아웃을 사용하고 처리할 블록 요소의 부모 요소에 속성을 추가하면 display:flex 및justify-content:center

.parent{
            display:flex;
            justify-content:center;
        }
.div{
            width:100px;
            height:100px;
     }

7, 수직 가운데 - 부모 요소의 높이가 정해진 단행 텍스트
부모 요소의 Height와 line-height 높이가 일치하도록 설정합니다
8, 수직 가운데 - 부모 요소가 정한 여러 줄 텍스트/그림/블록급 요소
1) 테이블 태그를 삽입하고 vertical-align:middle;//를 설정합니다.IE8 이하(table 권장 안 함)
2) 블록급 요소의 디스플레이 설정:table-cell,vertical-align 활성화middle 설정
9, 수직 가운데 - 알려진 높이의 블록 요소

.div{
            top: 50%;
            margin-top: -100px;  /* margin-top          */
            position: absolute;
            padding:0;
        }