CSS 수직 센터링 요약-CSS 튜토리얼-php.cn

CSS 수직 센터링 요약

高洛峰

풀어 주다： 2017-02-27 15:15:22

원래의

1177명이 탐색했습니다.

서문: 저자가 공부한 후의 나름의 이해와 정리입니다. 혹시 오류나 궁금한 점이 있으면 정정해 주시면 계속 업데이트 하도록 하겠습니다!

수직 센터링은 다양한 곳에서 사용되고 솔루션도 다양합니다.

알려진 요소 너비 위치 위치 지정 + 음수 여백 방법을 사용할 수 있습니다.

절대 위치 지정 + 4방향 모두 0px + 여백: 자동 가능 상위 컨테이너를 기준으로 수평 센터링을 달성합니다. 수직 센터링만 필요한 경우 왼쪽과 오른쪽을 삭제할 수 있으며 수평 센터링 방법은 다양합니다.
절대 위치 지정 + 왼쪽 50% + 왼쪽 여백: 음수 값 절반 width 가로로 가운데 맞춤 가능, 오른쪽도
절대 위치 지정 + 상단 50% + 여백 상단 가능: 음수 값 높이의 절반은 세로로 가운데 맞춤 가능, 하단도

CSS 수직 센터링 요약

아아앙

코드 보기

알 수 없는 요소 너비 위치 위치 지정 + 변환:변환(x, y)을 사용하여 이동할 수 있습니다.
절대 위치 지정 + 상단 50% + 하단 50% + 변환:변환(-50%, - 50%) 세로 중심 맞추기

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 500px;
                height: 500px;
                background: #f90;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                position: absolute;
                margin: auto;
                /*绝对定位 + 4个方向全部0px + margin：auto 可以做到基于父容器水平垂居中*/
                /*如果只需要垂直居中，那可以把left和right删掉，并且水平居中的方法也很多*/
            }
            .content{
                width: 100px;
                height: 200px;
                background: #0f8;
                position: absolute;
                /*position: absolute基于第一个不是position：static的父级元素定位*/
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -100px;
                /*绝对定位 + 左50% + margin左：宽度一半的负值 可以做到水平居中  右也可以*/
                /*绝对定位 + 上50% + margin上：高度一半的负值 可以做到垂直居中  底部也可以*/
            }
        </style>
    </head>
    <body>
        <p class="wrapper">
            <span class="content"></span>
        </p>
    </body></html>

로그인 후 복사

img 이미지 p에서는 수직 중앙에 위치합니다 :

vertical-align:middle을 사용할 수 있지만 이 속성은 인라인 블록 유형의 요소에서만 작동합니다(인라인도 영향을 미칩니다). 계속해서 수직 정렬에 대해 알아보세요.

CSS 수직 센터링 요약
방법 1: 이미지 수직 정렬:중간 + 상위 요소의 높이가 줄 높이와 일치합니다

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 500px;
                height: 500px;
                background: #f90;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                position: absolute;
                margin: auto;
                /*绝对定位 + 4个方向全部0px + margin：auto 可以做到基于父容器水平垂居中*/
                /*如果只需要垂直居中，那可以把left和right删掉，并且水平居中的方法也很多*/
            }
            .content{
                width: 100px;
                height: 200px;
                background: #0f8;
                position: absolute;
                /*position: absolute基于第一个不是position：static的父级元素定位*/
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                /*transform变化、使...变形、转换；transform属性应用于元素的2D或3D转换。这个属性允许你将元素移动，旋转，缩放，倾斜*/
                /*translate平移,是transform的属性值的一部分*/
                /*transition过渡、转变；可多个样式的变换效果*/
            }
        </style>
    </head>
    <body>
        <p class="wrapper">
            <span class="content"></span>
        </p>
    </body></html>

로그인 후 복사

코드 보기

방법 2: 상위 요소 설정 표시: 테이블 셀 및 세로 -align

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;margin: 0;
            }
            .wrapper{
                height: 300px;
                line-height: 300px;
                width: 300px;
                margin:100px auto;
                background: #f90;
                text-align: center;
            }
            .wrapper img{
                width: 150px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <p class="wrapper">
            <img src="images/1.jpg" alt="美女" title="美女"/>
        </p>
    </body></html>

로그인 후 복사

CSS 수직 센터링 요약과 관련된 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!