이전 버전의 CSS 유연한 상자 레이아웃 사양에서는 절대 위치로 배치된 하위 요소가 크기가 0x0픽셀인 가변 항목인 것처럼 정적 위치를 설정했습니다. 최신 버전의 사양에서는 이러한 요소가 흐름에서 완전히 벗어나고 정렬 및 양쪽 맞춤 속성을 기반으로 정적 위치를 설정합니다. 이 문서 작성 시점을 기준으로 데스크톱용 Edge와 Opera 39에서는 이미 이 기능을 지원하고 있습니다.
예를 들어 다음 HTML에 위치 지정 동작을 적용해 보겠습니다.
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
다음과 같은 항목을 추가합니다.
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
Chrome 52 이상에서 중첩된 <div>
는 컨테이너 <div>
에서 완벽하게 중앙에 배치됩니다.
정책을 준수하지 않는 브라우저에서는 녹색 상자의 왼쪽 상단이 빨간색 상자의 상단 중앙에 있습니다.