CSS3에서 이미지를 중앙에 배치하는 데 사용할 수 있는 요소는 무엇인가요?

CSS3에서는 [align-items:center] 요소와 [justify-content:center] 요소를 사용하여 이미지를 중앙에 배치할 수 있습니다. align-items 속성은 Flex 컨테이너의 현재 행의 세로 축을 따라 Flex 항목의 정렬을 정의합니다.

방법:

align-items:center(세로 가운데 맞춤) 및 justify-content:center(가로 가운데 맞춤) 두 가지 속성을 사용하세요.

align-items 속성은 Flex 컨테이너의 현재 행의 세로 축 방향으로 Flex 항목의 정렬을 정의합니다.

(학습 동영상 추천: css 동영상 튜토리얼)

html:

<div class="container container-2">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

css:

.container-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    text-align: center;
}

절대 위치 지정 + 여백을 사용하여 이를 달성할 수도 있습니다.

이미지는 외부 레이어를 기준으로 부동하고 여백: auto

HTML:

<h3 class="demo">绝对定位+Margin</h3>
<div class="container container-1">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

CSS:

.container-1 {position: relative;}

.container-1 img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

관련 권장 사항: CSS 튜토리얼

위 내용은 CSS3에서 이미지를 중앙에 배치하는 데 사용할 수 있는 요소는 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!