div 태그: 가로 센터링 및 세로 센터링 구현(코드 포함)

이 글의 내용은 div 태그(가로 센터링 및 세로 센터링) 구현에 관한 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

프론트엔드 개발에서 센터링이 필요한 상황이 자주 발생합니다. 센터링에는 두 가지 상황이 있는데, 하나는 수평 센터링이고 다른 하나는 사용된 방법을 요약해 보겠습니다.

수평 센터링 구현

margin：0 auto

auto는 수평 센터링 효과를 얻기 위해 왼쪽과 오른쪽 여백 사이의 거리가 동일함을 의미합니다.

세로 센터링 구현

1. 오프셋을 기준으로 달성

<style>
    *{margin: 0;padding: 0;}
    .content{
        position: relative;
        width: 300px;
        height: 300px;
        background-color: #000;
        margin: 300px auto;
    }
    .beat{
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        position: absolute;
        left:50%;
        top:50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>

<div>
    <div>
    </div>
</div>

빨간색 사각형은 검은색 사각형의 중앙에 위치하여 수직 중심 효과를 얻습니다.

왼쪽과 위쪽은 빨간색의 시작점으로 각각 50%로 설정됩니다. 사각형은 수직 중심에 위치합니다.

상자 내부의 중심점을 수직으로 중심에 두려면 margin-top 값도 추가해야 합니다. 빨간색 상자 높이/2, margin-left 값은 빨간색 상자 너비/2입니다.

2. p 블록에서 여러 줄의 텍스트를 수직으로 중앙에 배치하려면 table 및 table-cell을 사용할 수 있습니다.

<style>
    *{margin: 0;padding: 0;}
    .content{
        width: 300px;
        height: 300px;
        background-color: #000;
        margin: 300px auto;
        color: #fff;
        display: table;
        text-align: center;
    }
    .content p{
        display: table-cell;
        height: 100px;
        vertical-align: middle;
    }
</style>

<div>
   <p>垂直居中是布局中十分常见的效果之一垂直居中是布局中十分常见的效果之一垂直居中是布局中十分
       常见的效果之一垂直居中是布局中十分常见的效果之一</p>
</div>

display: table은 블록 요소를 블록 수준 테이블로 만듭니다. -cell ;하위 요소를 표 셀로 설정, 수직 정렬: 중간; 수직 중앙 정렬 효과를 얻기 위해 표 내용을 중앙에 배치합니다.

추천 관련 기사:

innerHTML 속성이 무엇인가요? innerHTML 속성 사용법

반응형 레이아웃이란 무엇인가요? HTML 반응형 레이아웃 구현

위 내용은 div 태그: 가로 센터링 및 세로 센터링 구현(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!