수평 및 수직 절대 위치 요소를 중앙에 배치하는 방법-CSS 튜토리얼-php.cn

수평 및 수직 절대 위치 요소를 중앙에 배치하는 방법

高洛峰

풀어 주다： 2017-02-24 13:35:07

원래의

1300명이 탐색했습니다.

이 글에서는 절대 위치 요소의 수평 및 수직 센터링 방법을 주로 소개합니다. 참고로 필요한 친구들은 함께 살펴보세요

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. margin: 자동으로 중앙 정렬

<!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 중국어 웹사이트에 주목하세요!