LAYOUT LAB / CANONICAL HTML + CSS

가운데에 놓기

Center one region along both axes.

720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드
<section class="super_center" aria-labelledby="centered-dialog-title">
    <form aria-labelledby="centered-dialog-title">
        <h2 id="centered-dialog-title">Confirm archive</h2>
        <button>Archive project</button>
    </form>
</section>

<style>
.super_center {
    display: grid;
    min-block-size: 100dvh;
    place-items: center;
}

</style>
원문 가이드