CSS 수직 센터링 요약

高洛峰
풀어 주다: 2017-02-27 15:15:22
원래의
1200명이 탐색했습니다.

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

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

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

절대 위치 지정 + 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 중국어 홈페이지를 주목해주세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!