[CSS] CSS 위치 지정 및 화면 중앙 배치

1. 가로 가운데 정렬 방법

margin 이용 가로 가운데 정렬 방법
margin-left: auto;
margin-right: auto;

margin: 0 auto;
margin: 0 auto 0 auto;
text-align 이용 가로 가운데 정렬 방법
- 부모에 스타일 적용해야 함
text-align: center; // left, right
단, 자식 박스는 반드시 display: inline-block; or inline; 여야 한다.
position/transform 이용 가로 가운데 정렬 방법(박스 높이를 모를 경우)
- 부모에 스타일 적용해야 함
position: relative;
left: 50%;
transform: translateX(-50%);
display flex 가로 가운데 정렬 방법
display: flex;
justify-content: center;
display grid 가로 가운데 정렬 방법
display: grid;
justify-content: center;

<!DOCTYPE html>
<html>
    <body>
        <h2>가로 가운데 정렬 방법</h2>
        <section><div class="div-h-1">margin left/right</div></section>
        <section><div class="div-h-2">position/transform(박스 넓이를 모를 경우)</div></section>
        <section class="div-h-3"><div>text-align: center</div></section>
        <section class="div-h-11"><div>display: flex; justify-content: center</div></section>
        <section class="div-h-21"><div>display: grid; justify-content: center</div></section>
    </body>
</html>

<style>
    * { padding: 0; margin: 0; }
    body { margin: 5px; }

    section {
        display: block;
        height: 200px;
        border-bottom: 1px dashed;
        padding: 10px;
    }

    div {
        border: 1px dotted rgb(48, 48, 48);
        width: 300px;
        height: 100px;
        background-color: rgb(204, 204, 204);
    }

    /* margin 이용 가로 가운데 정렬 방법 */
    .div-h-1 {
        margin-left: auto;
        margin-right: auto;
    }

    .div-h-2 {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .div-h-3 {
        position: relative;
        text-align: center;
    }

    .div-h-3 > div {
        display: inline-block;
    }

    .div-h-11 {
        display: flex;
        justify-content: center;
    }

    .div-h-21 {
        display: grid;
        justify-content: center;
    }
</style>

2. 세로 가운데 정렬 방법

position/margin 이용 세로 가운데 정렬 방법(박스 높이를 알 경우)
- 부모에 스타일 적용해야 함
position: relative;
top: 50%;
margin-top: -50px;
position/transform 이용 세로 가운데 정렬 방법(박스 높이를 모를 경우)
- 부모에 스타일 적용해야 함
top: 50%;
transform: translateY(-50%);
display flex 세로 가운데 정렬 방법
display: flex;
align-items: center;
display grid 세로 가운데 정렬 방법
display: grid;
align-items: center;

<!DOCTYPE html>
<html>
    <body>
        <h2>세로 가운데 정렬 방법</h2>
        <section><div class="div-v-1">top/margin top(박스 높이를 알 경우)</div></section>
        <section><div class="div-v-2">position/transform(박스 높이를 모를 경우)</div></section>
        <section class="div-v-11"><div>display: flex; align-items: center; </div></section>
        <section class="div-v-21"><div>display: grid; align-items: center; </div></section>
    </body>
</html>

<style>
    * { padding: 0; margin: 0; }
    body { margin: 5px; }

    section {
        display: block;
        height: 200px;
        border-bottom: 1px dashed;
        padding: 10px;
    }

    div {
        border: 1px dotted rgb(48, 48, 48);
        width: 300px;
        height: 100px;
        background-color: rgb(204, 204, 204);
    }

    .div-v-1 {
        position: relative;
        top: 50%;
        margin-top: -50px;
    }

    .div-v-2 {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .div-v-11 {
        display: flex;
        align-items: center;
    }

    .div-v-21 {
        display: grid;
        align-items: center;
    }

</style>

3. 가로/세로 가운데 정렬

postition/transfrom 이용 가로/세로 가운데 정렬 방법
- 부모에 스타일 적용해야 함
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // X축, Y축 둘다
display flex 가로 가운데 정렬 방법
display: flex;
justify-content: center;
align-items
display grid 가로 가운데 정렬 방법
display: grid;
justify-content: center;
align-items

<!DOCTYPE html>
<html>
    <body>
        <h2>가로/세로 가운데 정렬 방법</h2>
        <section><div class="div-hv-1">margin: left/right</div></section>
        <section><div class="div-hv-2">position/transform(박스 높이를 모를 경우)</div></section>
  		<section class="div-hv-11"><div>display: flex;</div></section>
        <section class="div-hv-21"><div>display: grid;</div></section>  
    </body>
</html>

<style>
    * { padding: 0; margin: 0; }
    body { margin: 5px; }

    section {
        display: block;
        height: 200px;
        border-bottom: 1px dashed;
        padding: 10px;
    }

    div {
        border: 1px dotted rgb(48, 48, 48);
        width: 300px;
        height: 100px;
        background-color: rgb(204, 204, 204);
    }

    .div-hv-1 {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        top: 50%;
        margin-top: -50px;
    }

    .div-hv-2 {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

	.div-hv-11 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .div-hv-21 {
        display: grid;
        justify-content: center;
        align-items: center;
    }
</style>

저작자표시

'FrontEnd > CSS' 카테고리의 다른 글

[CSS] CSS Flex(Flexible Box) - Container (0)	2022.10.12
[CSS] CSS 애니메이션 (0)	2022.10.06
[CSS] CSS float, clear 속성 (1)	2022.10.05
[CSS] CSS 배경 이미지(background-image) (0)	2022.10.05
[CSS] CSS block vs inline, <div> vs <span> (1)	2022.09.22

1. 가로 가운데 정렬 방법

2. 세로 가운데 정렬 방법

3. 가로/세로 가운데 정렬

'FrontEnd > CSS' 카테고리의 다른 글

티스토리툴바