[CSS] 컨텐츠 요소 중앙정렬 방법

인라인 요소 중앙정렬 방법

한줄 요소일때 height값과 line-heigh값을 같이 사용하면 중간에 오게 할 수 있음.

(많이 쓰는 방법은 아님...)

// HTML
<div calss="center">
    <span>center</span>
</div>

// CSS
.center {
    text-align: center;
    height: 100vh;
    line-height: 100vh;
}
.center span {
    display: inline-block;
    width: 100px; height: 100px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
}

 

---

블록 요소 중앙정렬 방법

블록요소 양쪽에 auto값을 주면 가운데 정렬이 가능.

// HTML
<div calss="center">
    <span>center</span>
</div>

// CSS
.center {
    width: 100px; height: 100px;
    line-height: 100vh;
    margin: 0 auto;
}
.center span {
    display: inline-block;
    width: 100px; height: 100px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
}

 

---

테이블 구조를 이용한 중앙정렬 방법

vertical-align: middle 속성을 이용한 가운데 정렬 방법.

(구조가 복잡해지는 단점때문에 잘 사용하지 않음...)

// HTML
<div calss="center">
    <span><em>center</em></span>
</div>

// CSS
.center {
    display: table;
    width: 100px; height: 100px;
}
.center span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.center span em {
    display: inline-block;
    width: 100px; height: 100px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    color: #000;
}

 

---

포지션을 이용한 중앙정렬 방법 1

left: 50%; top: 50%를 기준으로 요소의 width/2, heigh/2 값만큼 마진으로 정렬시키는 방법.

(요소의 width값과 height값을 알고 있을때 사용하는 방법)

(포지션을 사용하면 영역이 사라지는 단점...)

// HTML
<div calss="center">
    <span>center</span>
</div>

// CSS
.center {
    position: relative;
    height: 100vh;
}
.center span {
    position: absolute;
    left: 50%; top: 50%;
    display: inline-block;
    width: 100px; height: 100px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    color: #000;
}

 

---

포지션을 이용한 중앙정렬 방법 2

left: 50%; top: 50%를 기준으로 요소의 width/2, heigh/2 값만큼 transform: translate를 이용한 방법

(요소의 width값과 height값을 모르고 있을때 사용하는 방법)

(포지션을 사용하면 영역이 사라지는 단점...)

// HTML
<div calss="center">
    <span>center</span>
</div>

// CSS
.center {
    position: relative;
    height: 100vh;
}
.center span {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 100px; height: 100px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    color: #000;
}

 

---

포지션을 이용한 중앙정렬 방법 3

left: 0, top: 0, right: 0; bottom: 0; 과 margin: auto;를 이용한 방법(포지션을 사용하면 영역이 사라지는 단점...)

// HTML
<div calss="center">
    <span>center</span>
</div>

// CSS
.center {
    position: relative;
    height: 100vh;
}
.center span {
    position: absolute;
    left: 0; top: 0; right: 0, bottom: 0;
    margin: auto;
    display: inline-block;
    width: 100px; height: 100px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    color: #000;
}

 

---

flex를 이용한 중앙정렬 방법

display: flex로 설정하고, align-item과 justify-content를 설정하면 가운데로 정렬 가능.

(플렉스를 사용하면 영역이 사라지지 않고 유지되기 때문에 코딩 작업시 편리...)

// HTML
<div calss="center">
    <span>center</span>
</div>

// CSS
.center {
    display: flex;
    align-items: center;
    height: 100vh;
}
.center span {
    display: inline-block;
    width: 100px; height: 100px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    color: #000;
}