질문 html+css

본문 전재

방법 1

사고방식 실현: 두 개의div 플러그인을 사용하고 외층div의 넓이를 브라우저 창 크기로 설정하여 상대적으로 위치를 정한다.내부div 절대 포지셔닝, top 속성과left 속성을 각각 50%로 설정한 다음에 마이너스 간격을 설정합니다. 크기는 각각 Height와width의 절반입니다.코드는 다음과 같습니다.


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>       title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*     */

        .outer-wrap{
            /*     html body  height: 100% ，   height   ，
                                  */
            height: 100%;    
            position: relative;
            background-color: rgba(0, 0, 0, .5);
        }
        .login-panel{
            width: 400px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    style>
head>
<body>
    <div class="outer-wrap">
        <div class="login-panel">    div>
    div>
body>
html>

효과는 다음과 같습니다.
방법 1
망치 과학 기술 pc단의 로그인 페이지는 유사한 방법으로 이루어진 것이다

방법 2

실현 사고방식: 외층div에 상대적인 포지셔닝을 설정하고 내층div에 width,height, 절대적인 포지셔닝을 설정하며 top,left,bottom,right 속성을 0,margin을 auto로 설정한다.
코드 먼저 보기


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>       title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*     */

        .outer-wrap{
            /*     html body  height: 100% ，     ，
                                  */
            height: 100%;    
            position: relative;
            background-color: rgba(0, 0, 0, .5);
        }
        .login-panel{
            width: 400px;
            height: 400px;
            background-color: orange;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    style>
head>
<body>
    <div class="outer-wrap">
        <div class="login-panel">           div>
    div>
body>
html>

효과는 다음과 같습니다.
방법 2
우리는 포지셔닝을 자주 사용할 때 보통 상하, 좌우 중 하나만 설정합니다. 만약에 top,bottom,left,right 네 가지 속성을 동시에 설정하면 top와left만 효력이 발생합니다.그래서 이 방법은 네 개의 포지셔닝 속성을 설정하는 동시에margin:auto를 설정했다.여러분들이 직접 해 보셔도 됩니다.
이 방법은 내층div를 외층div에 가운데로 설정하는데 효과가 특히 좋다.
응!대단합니다. JS, 순수 css를 사용하지 않았습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

어떻게 리의 앞에 있는 그 원점을 제거합니까

css 스타일의list-style-type 속성을none으로 설정하면 다음과 같은list-style-type:none로 코드할 수 있습니다. 다음 코드는 탭에 있습니다 탭을 제어할 수 있는 css 스타일 코드는 다음...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

질문 html+css

방법 1

방법 2

좋은 웹페이지 즐겨찾기