화면 중앙 배치(접근성 고려)

화면 중앙 배치

1. absolute_1 (접근성 X)
2. absolute_2 (접근성 X)
3. flex
4. grid
5. fixed

1. Position : absolute (접근성 X)

.container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

위와 같은 값을 넣어주면 중앙 배치가 된다. 단, 화면을 확대하는 경우 윗부분이 짤리게 된다.

2. Positon : absolute (접근성 X)

.container {
    		position: absolute;
    		inset: 0;
            margin: auto;
        }

이것 또한 확대시 윗부분이 짤리게 된다.

3. display : flex (접근성 O)

body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
}

justify-content와 align-items를 이용하여 중앙 배치를 시켜준다.
다만 min-heihgt를 꼭 100vh(화면크기)로 주어야 한다.

4. display : grid (접근성 O)

body {
            margin: 0;
            padding: 0;
            display: grid;
            place-items: center;
            min-height: 100vh;
}

place-items : center = justify-content : center + align-items : center
단, justify-content와 align-item는 flex의 속성이고 place-items는 grid 속성이다.

5. Position : fixed

.container {
            position: fixed;
            margin: auto;
            inset: 0;
}