div 내부 요소 수평 수직 거중 총결 실현

(1) flex 신축성 레이아웃의 첫 번째 실현 방법(align-self:center):

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			/*    ，   float，vertical-align，clear  */
			display:flex;
		}
		.box_child{
			width: 200px;
			height: 200px;
			background-color: yellow;
			/* box     */
			margin: 0 auto;
			/*           */
			align-self: center;
		}

두 번째 방법(align-items: center):

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			/*    ，   float，vertical-align，clear  */
			display:flex;
			/*           */
			align-items: center;
			/*       */
			justify-content: center;
}
.box_child{
			width: 200px;
			height: 200px;
			background-color: yellow;
}

alignItems와justifyContent가 협조하여 사용하는데 전자는 측축 레이아웃이고 후자는 주축 레이아웃이다.
(2) 하위 요소의 알려진 너비

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			position: relative;
}
.box_child{
			width: 200px;
			height: 200px;
			background-color: yellow;
			position: absolute;
			/*            */
		    left: 50%;
		    top: 50%;
		    /*      100px，      100px*/
		    margin: -100px 0 0 -100px;
}

(3) 하위 상자는 absolute 레이아웃

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			position: relative;
}
.box_child{
			width: 200px;
			height: 200px;
			background-color: yellow;
			/*    */
			margin: auto;
			/*    */
		    position: absolute;
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
}

하위 상자가 absolute일 때, 부모 상자의 배치도 absolute일 수 있습니다.(4) 만능 레이아웃은 넓이가 백분율이든 고정이든 설정하지 않았다.아래와 같이 수직으로 가운데를 배치할 수 있습니다.

.box{
			width: 300px;
			height: 300px;
			background-color: red;
			position: absolute;
}
.box_child{
			width: 50%;
			height: 50%;
			background-color: yellow;
			position: absolute;
			/*            */
			top: 50%;
			left: 50%;
			/*       */
			-webkit-transform: translate(-50%,-50%);
			/*  IE   */
			-ms-transform: translate(-50%, -50%);
			/*       */
			-moz-transform: translate(-50%,-50%);
			/*   x   50%，y   50%*，            */
}

물론 너도 그 세 개의 브라우저에 대응하는 코드를transform:translate(-50%,-50%)로 직접 바꿀 수 있다.자부 레이아웃은 두 개 모두relative나absolute로 쓸 수 있다.하위 레이아웃은 단독으로relative입니다.부모 레이아웃은relative이고, 하위 레이아웃은absolute입니다.부모 레이아웃은 absol이고, 하위 레이아웃은relative입니다.주:line-height는 줄이 높고 상자 안의 원소가 한 줄일 때 높이와 같이 수직 가운데를 설정할 수 있으며 여러 줄일 때는 수직 가운데를 실현할 수 없습니다.