CSS의 수평 및 수직 센터링 방법은 무엇입니까? (코드 예)

이 기사에서는 CSS의 수평 및 수직 센터링 방법에 대해 설명합니다. (코드 예)에는 특정 참고 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

수직 중심 정렬의 순수 CSS 방법

1. 위치 기반: 절대(그러나 절대 위치 지정은 문서 흐름에서 벗어나고 형제 요소에 영향을 미침)

1. 위치: 절대;상단: 50%;왼쪽: 50%;margin-top: -50px;margin-left: -50px;

#🎜🎜 #2 , 여백: 자동;위치: 절대;상단: 0;오른쪽:0;하단: 0;왼쪽: 0;

위의 두 div 크기는 명확합니다

3, 변환 :translate(-100px,-100px); 위치: 절대; 상단: 50%; 왼쪽: 50%

2. 크기가 불분명합니다

4 . 디스플레이: flex ;justify-content:center;align-items:center;

5. 디스플레이: 테이블, (페이지의 전체 레이아웃이 파괴됩니다)

.wrapper {
                height: 400px;
                width:600px;
                border: 2px solid pink;
                border-radius:10px;
                display:table;
            }
            .box {
                text-align:center;
                position:relative;
                display:table-cell;
                vertical-align:middle;
                background:#abcdef;
            }

       <div class="wrapper">
        
    <div class="box">adfagagafajkfhla</div>
   
     </div>

위는 CSS의 가로, 세로 센터링 방법이 무엇인가요? (코드 예) 전체 소개,

CSS 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 CSS의 수평 및 수직 센터링 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!