[html] 너비 / 높이가 정의 된 div 콘텐츠의 중앙에 세로로 정렬하는 방법은 무엇입니까?

나는 이것을 조금 조사했으며 네 가지 옵션이 있음을 발견했습니다.

버전 1 : 테이블 셀로 표시되는 상위 div

display:table-cell상위 div에서를 사용해도 괜찮다 면 다음 옵션을 사용할 수 있습니다.

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

라이브 데모

---

버전 2 : 디스플레이 블록 및 콘텐츠 디스플레이 테이블 셀이있는 상위 div

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;
}​

라이브 데모

---

버전 3 : 상위 div 부동 및 콘텐츠 div를 디스플레이 테이블 셀로 사용

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

라이브 데모

---

버전 4 : 절대 콘텐츠 위치가있는 상위 div 위치 상대

이 버전에서 내가 가진 유일한 문제는 모든 특정 구현에 대해 CSS를 만들어야한다는 것입니다. 그 이유는 콘텐츠 div가 텍스트가 채워질 높이를 설정해야하고 여백 상단이 그 높이를 파악해야하기 때문입니다. 이 문제는 데모에서 볼 수 있습니다. 콘텐츠 div의 높이 %를 변경하고 여기에 -.5를 곱하여 모든 시나리오에서 수동으로 작동하도록 할 수 있습니다.

.area{
    position:relative;
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content {
    position:absolute;
    top:50%;
    height:50%;
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

라이브 데모