CSS 위치 고정 - CSS wichi gojeong

Question

당신은 기본적으로 설정해야 top하고 left하는 50%사업부의 왼쪽 상단 모서리를 중심으로하는. 또한 설정해야 margin-top하고 margin-left사업부의 높이와 폭의 부정적인 절반 사업부의 중앙쪽으로 중심을 이동 할 수 있습니다.

따라서 <!DOCTYPE html>(표준 모드)가 제공되면 다음을 수행해야합니다.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

당신은 수직 및 IE6 / 7 오래된 브라우저를 중심으로 신경 쓰지 않는 경우 또는, 당신은 대신도 추가 할 수 있습니다 left: 0및 right: 0요소에 데 margin-left와 margin-right의 auto고정 위치 요소는 고정 폭을 갖는 그래서 것을 알고 곳의 왼쪽 오른쪽 오프셋이 시작됩니다. 따라서 귀하의 경우 :

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

다시 말하지만, 이것은 IE에 관심이 있다면 IE8 +에서만 작동하며 수직이 아닌 수평으로 만 중앙에 위치합니다.

-------------------

동적 너비와 높이로 화면 중앙에 팝업 상자를 만들고 싶습니다.

다음은 동적 너비가있는 요소를 수평으로 중앙에 배치하는 최신 접근 방식입니다. 모든 최신 브라우저에서 작동합니다. 지원은 여기에서 볼 수 있습니다 .

업데이트 된 예

.jqbox_innerhtml {
    position: fixed;
        left: 50%;
            transform: translateX(-50%);
            }

수직 및 수평 센터링 모두에 대해 다음을 사용할 수 있습니다.

업데이트 된 예

.jqbox_innerhtml {
    position: fixed;
        left: 50%;
            top: 50%;
                transform: translate(-50%, -50%);
                }

더 많은 공급 업체 접두사 속성을 추가 할 수도 있습니다 (예제 참조).

-------------------

또는 원래 CSS 에 left: 0및 추가 right: 0하기 만하면 일반 비 고정 요소와 유사하게 작동하고 일반적인 자동 여백 기술이 작동합니다.

.jqbox_innerhtml
{
  position: fixed;
    width:500px;
      height:200px;
        background-color:#FFF;
          padding:10px;
            border:5px solid #CCC;
              z-index:200;
                margin: 5% auto;
                  left: 0;
                    right: 0;
                    }

DOCTYPEIE에서 올바르게 작동 하려면 유효한 (X) HTML 을 사용해야합니다 (물론 그래야합니다 ..!).

-------------------

다음과 같은 컨테이너를 추가하십시오.

div {
  position: fixed;
    bottom: 0;
      left: 0;
        width: 100%;
          text-align: center;
          }

그런 다음 상자를이 div에 넣으면 작업이 수행됩니다.

편집 : 주석에서 언급했듯이 내부 콘텐츠는 display: inline-block다음과 같은 두 개의 div가 있다고 가정 하도록 설정해야합니다 .

    <div class="outer">
        <div class="inner">
                     content goes here
                             </div>
                                 </div>

그런 다음 내부의 CSS는 다음과 같아야합니다.

    .outer {
        display: fixed;
                text-align: center;
                        left: 0;
                                right: 0;
                                    }
                                        .inner {
                                                display: inline-block;
                                                    }

a left: 0; right:0;및 text-align: center이 있는 외부 div와 함께 내부 div의 너비를 명시 적으로 지정하지 않고 내부 div를 중앙에 정렬합니다.

-------------------

다음을 추가하십시오.

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

-------------------

#modal {
    display: flex;
        justify-content: space-around;
            align-items: center;
                position: fixed;
                    left: 0;
                        top: 0;
                            width: 100%;
                                height: 100%;
                                }

내부에는 너비, 높이가 다르거 나없는 요소가있을 수 있습니다. 모두 중심입니다.

-------------------

이 솔루션은 팝업 div에 너비와 높이를 정의 할 필요가 없습니다.

http://jsfiddle.net/4Ly4B/33/

그리고 팝업의 크기를 계산하고 상단의 절반을 빼는 대신 자바 스크립트는 전체 화면을 채우기 위해 popupContainer의 크기를 조정합니다.

(높이 100 %, display : table-cell 사용시 작동하지 않음; (수직으로 가운데에 있어야 함)) ...

어쨌든 작동합니다 :)

-------------------

left: 0;
right: 0;

IE7에서 작동하지 않았습니다.

로 변경

left:auto;
right:auto;

작동하기 시작했지만 나머지 브라우저에서는 작동하지 않습니다! 그래서 아래의 IE7에서 이런 식으로 사용했습니다.

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
  }

-------------------

I 사용 vw(뷰포트 폭) 및 vh(뷰포트 높이). 뷰포트는 전체 화면입니다. 100vw화면의 총 너비이고 100vh총 높이입니다.

.class_name{
    width: 50vw;
        height: 50vh;
            border: 1px solid red;
                position: fixed;
                    left: 25vw;top: 25vh;   
                    }

-------------------

이것은 나를 위해 가장 잘 작동했습니다.

    display: flex;
    justify-content: center;
        align-items: center;
            position: fixed;
                left: 0;
                    top: 0;
                        width: 100%;
                            height: 100%;

-------------------

당신은 기본적으로 다른로 포장 할 수 div와 그 설정 position에를 fixed.

.bg {
      position: fixed;
        width: 100%;
        }
        
        .jqbox_innerhtml {
          width: 500px;
            height: 200px;
              margin: 5% auto;
                padding: 10px;
                  border: 5px solid #ccc;
                    background-color: #fff;
                    }

<div class="bg">
      <div class="jqbox_innerhtml">
          This should be inside a horizontally and vertically centered box.
            </div>
            </div>

-------------------

위치를 수정하려면 다음을 사용하십시오.

div {
    position: fixed;
        left: 68%;
            transform: translateX(-8%);
            }

-------------------

간단합니다.

position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;

-------------------

가능한 대답 :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
        <title>CSS Center Background Demo</title>
            <style type="text/css">
                    body {
                                margin: 0;
                                            padding: 0;
                                                    }
                                                    
                                                            div.centred_background_stage_1 {
                                                                        position: fixed;
                                                                                    z-index:(-1 );
                                                                                                top: 45%;
                                                                                                            left: 50%;
                                                                                                                    }
                                                                                                                    
                                                                                                                            div.centred_background_stage_2 {
                                                                                                                                        position: relative;
                                                                                                                                                    left: -50%;
                                                                                                                                                    
                                                                                                                                                                top: -208px;
                                                                                                                                                                            /* % does not work.
                                                                                                                                                                                           According to the
                                                                                                                                                                                                          http://reeddesign.co.uk/test/points-pixels.html
                                                                                                                                                                                                                         6pt is about 8px
                                                                                                                                                                                                                         
                                                                                                                                                                                                                                        In the case of this demo the background
                                                                                                                                                                                                                                                       text consists of three lines with
                                                                                                                                                                                                                                                                      font size 80pt.
                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                     3 lines (with space between the lines)
                                                                                                                                                                                                                                                                                                    times 80pt is about
                                                                                                                                                                                                                                                                                                                   ~3*(1.3)*80pt*(8px/6pt)~ 416px
                                                                                                                                                                                                                                                                                                                   
                                                                                                                                                                                                                                                                                                                                  50% from the 416px = 208px
                                                                                                                                                                                                                                                                                                                                               */
                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                           text-align: left;
                                                                                                                                                                                                                                                                                                                                                                       vertical-align: top;
                                                                                                                                                                                                                                                                                                                                                                               }
                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                       #bells_and_wistles_for_the_demo {
                                                                                                                                                                                                                                                                                                                                                                                                   font-family: monospace;
                                                                                                                                                                                                                                                                                                                                                                                                               font-size: 80pt;
                                                                                                                                                                                                                                                                                                                                                                                                                           font-weight: bold;
                                                                                                                                                                                                                                                                                                                                                                                                                                       color: #E0E0E0;
                                                                                                                                                                                                                                                                                                                                                                                                                                               }
                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                       div.centred_background_foreground {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                   z-index: 1;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                               position: relative;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           </style>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           </head>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           <body>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           <div class="centred_background_stage_1">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               <div class="centred_background_stage_2">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       <div id="bells_and_wistles_for_the_demo">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   World<br/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               Wide<br/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           Web
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       <div class="centred_background_foreground">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           This is a demo for <br/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           </a>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               <br/><br/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   <a href="http://www.starwreck.com/" style="border: 0px;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           <img src="./star_wreck_in_the_perkinnintg.jpg"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        style="opacity:0.1;"/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </a>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <br/>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </body>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </html>

-------------------

올바르게 가운데에 맞지 않는 수평 요소에 이것을 사용해보십시오.

width : calc (width : 100 %-width 중앙에서 벗어난 너비 )

예를 들어 측면 탐색 메뉴가 200px 인 경우 :

width: calc(100% - 200px);

-------------------

나는 다음과 같이 사용합니다.

.c-dialogbox {
    --width:  56rem;
        --height: 32rem;
        
            position: fixed;
            
                width:  var(--width);
                    height: var(--height);
                        left:   calc( ( 100% - var(--width) ) / 2 );
                            right:  calc( ( 100% - var(--width) ) / 2 );
                                top:    calc( ( 100% - var(--height) ) / 2 );
                                    bottom: calc( ( 100% - var(--height) ) / 2 );
                                    }

그것은 나를 위해 대화 상자를 가로 및 세로 중앙에 배치하고 다른 너비와 높이를 사용하여 다른 화면 해상도에 맞게 미디어 쿼리를 통해 반응하도록 할 수 있습니다.

CSS 사용자 정의 속성 calc()이 지원되지 않거나 지원되지 않는 브라우저에 대한 지원을 계속 제공해야하는 경우 옵션 이 아닙니다 (caniuse에서 확인).

-------------------

이것은 중앙에있는 사물의 크기를 모르고 모든 화면 크기의 중앙에 배치하려는 경우 훌륭하게 작동합니다.

.modal {
  position: fixed;
    width: 90%;
      height: 90%;
        top: 5%;           /* (100 - height) / 2 */
          left: 5%;          /* (100 - width) / 2 */
          }

-------------------

유일한 확실한 해결책은 다음과 같이 table align = center를 사용하는 것입니다.

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

전 세계 사람들이 div 중심화와 같은 근본적인 문제를 해결하기 위해이 엄청난 양을 어리석은 시간으로 낭비한다는 것을 믿을 수 없습니다. css 솔루션은 모든 브라우저에서 작동하지 않으며 jquery 솔루션은 소프트웨어 계산 솔루션이며 다른 이유로는 옵션이 아닙니다.

나는 테이블 사용을 피하기 위해 너무 많은 시간을 반복적으로 낭비했지만 경험에 따르면 테이블과 싸우는 것을 그만두라고합니다. 센터링 div에 테이블을 사용하십시오. 모든 브라우저에서 항상 작동합니다! 더 이상 걱정하지 마십시오.

출처
https://stackoverflow.com/questions/2005954

반응형 위치 고정 CSS 위치 설정

CSS 위치 고정 - CSS wichi gojeong

관련 게시물

서울 스포츠 테마파크 - seoul seupocheu temapakeu

중심 정맥관 주의사항 - jungsim jeongmaeggwan juuisahang

캐드 문자 스타일 일괄 변경 - kaedeu munja seutail ilgwal byeongyeong

힘의 시련 사당 - him-ui silyeon sadang

정리정돈 기본 준수 사항 7가지 - jeonglijeongdon gibon junsu sahang 7gaji

나의 찾기 에어 팟 - naui chajgi eeo pas

JScrollPane 예제 - JScrollPane yeje

페라이트 코어 모니터 - pelaiteu ko-eo moniteo

파이썬 문자열 인덱스 찾기 - paisseon munjayeol indegseu chajgi

듀얼모니터 게임중 마우스 - dyueolmoniteo geimjung mauseu

광고하는

최근 소식

디아블로 2 NPC - diabeullo 2 NPC

서든 총 티어 디시 - seodeun chong tieo disi

강릉 펜션 바베큐 - gangleung pensyeon babekyu

Rar 압축풀기 무설치 - rar abchugpulgi museolchi

이마트 상품권샵 교환 - imateu sangpumgwonsyab gyohwan

해피엔드 만화 결말 - haepiendeu manhwa gyeolmal

라이즈 오브 툼레이더 스킬 - laijeu obeu tumleideo seukil

이규현 목사 아들 - igyuhyeon mogsa adeul

Nft 랭킹사이트 - nft laengkingsaiteu

라디에이터 딱딱 소리 - ladieiteo ttagttag soli

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의