표시용 코드: 요소의 수직 중앙 정렬을 구현하기 위한 CSS의 flex 속성

이 글에서는 요소의 수직 중앙 정렬을 위한 코드를 구현하기 위한 CSS의 display: flex 속성을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

이전에 절대 위치 지정 절대 또는 고정 위치 지정 고정을 사용했습니다.

Flex를 사용하여 요소를 수직 중앙에 배치하는 방법, 부모에 자식이 포함됨

<div  class=&#39;itemBox&#39;>
    <div>boxboxboxboxboxboxboxboxboxboxbox</div>
</div>
 
.itemBox{
display: flex;
justify-content: center;
align-items: center;
background: #588cfe;
width: 100%;
height: 100vh;
}
.itemBox p{
background: #ffffff;
width: 200px;
height: 200px;
word-break: break-all;//英文超出盒子不换行问题
}

권장 관련 기사:

속성 문자열 변환을 위한 CSS 코드의 텍스트 변환

CSS에서 테이블을 사용하는 두 가지 방법(예)

위 내용은 표시용 코드: 요소의 수직 중앙 정렬을 구현하기 위한 CSS의 flex 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!