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

수직 정해진 너비 / 높이에서 콘텐츠를 중앙에 올바른 방법 하겠는가 div.

이 예 에는 높이가 다른 두 콘텐츠가 .content있습니다. 클래스를 사용하여 세로로 가운데에 두는 가장 좋은 방법은 무엇입니까 ? (그리고 모든 브라우저에서 작동하며의 솔루션없이 table-cell)

몇 가지 솔루션을 염두에두고 있지만 다른 아이디어를 알고 싶습니다 . 하나는 position:absolute; top:0; bottom: 0;및 margin auto.

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

버전 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;
}​

라이브 데모

display: flex몇 줄의 코드 만으로도이 작업을 수행 할 수 있습니다 . 다음은 그 예입니다.

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

라이브 데모

이 기사 에서이 해결책을 찾았습니다.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

요소의 높이가 고정되지 않으면 매력처럼 작동합니다.

div의 내용을 세로로 가운데에 맞추는 간단한 방법은 줄 높이를 높이와 동일하게 설정하는 것입니다.

<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}

그러나 이것은 한 줄의 텍스트에만 작동합니다!

가장 좋은 방법은 div를 컨테이너로 사용하고 값이 포함 된 범위를 사용하는 것입니다.

.cont {
  width: 100px;
  height: 30px;
  display: table;
}

.val {
  display: table-cell;
  vertical-align: middle;
}

    <div class="cont">
      <span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
    </div>

마진 : all_four_margin

all_four_margin에 50 %를 제공하면 요소가 중앙에 배치됩니다.

style="margin: 50%"

다음에도 적용 할 수 있습니다.

여백 : 오른쪽 상단 왼쪽 하단

여백 : 오른쪽 상단 및 왼쪽 하단

여백 : 상단 및 하단 오른쪽 및 왼쪽

적절한 %를 제공하여 원하는 곳에서 요소를 얻습니다.