집 >웹 프론트엔드 >CSS 튜토리얼 >절대 위치에 있는 요소를 수평 및 수직으로 중심에 맞추는 세 가지 방법

절대 위치에 있는 요소를 수평 및 수직으로 중심에 맞추는 세 가지 방법

php中世界最好的语言원래의: 2018-03-22 15:26:525744검색

이번에는 요소의 수평 및 수직 센터링을 위한 세 가지 절대 위치 방법을 알려 드리겠습니다. 절대 위치 요소의 수평 및 수직 센터링을 구현하기 위한 주의 사항은 무엇입니까?

1.css는 센터링을 구현합니다

단점: 요소의 너비와 높이를 미리 알아야 합니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%; top: 50%;
            border:1px solid #000;
            background:red;
            margin-top: -200px;    /* 高度的一半 */
            margin-left: -300px;    /* 宽度的一半 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

2. CSS3는 수평 및 수직 중앙 정렬을 구현합니다

참고: 요소의 크기에 관계없이 중앙 정렬이 가능합니다. 하지만 이 쓰기 방식은 IE8 이상에서만 호환되며 모바일 단말에서는 무시할 수 있습니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%;
            top: 50%;
            border:1px solid #000;
            background:red;
            transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

3. 여백: 자동으로 센터링 달성

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 0;
            top: 0; 
            right: 0; 
            bottom: 0;
            border:1px solid #000;
            background:red;
            margin: auto;    /* 有了这个就自动居中了 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!