programing

포지셔닝포지셔닝화면 중앙의 요소

muds 2023. 8. 4. 23:21
반응형

포지셔닝
화면 중앙의 요소

위치를 지정하고 싶습니다.<div>(또는 a)<table>) 화면 크기에 관계없이 화면 중앙에 있는 요소입니다.즉, '위'와 '아래'의 공간은 동일해야 하고 '오른쪽'과 '왼쪽'의 공간은 동일해야 합니다.저는 이것을 CSS로만 달성하고 싶습니다.

다음을 시도했지만 작동하지 않습니다.

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

참고:
어느 쪽이든 좋습니다.<div>요소(또는)<table>) 웹 사이트와 함께 스크롤하거나 그렇지 않습니다.페이지가 로드될 때 중앙에 배치되기를 원합니다.

너비와 높이가 고정되어 있는 경우 쉽게 사용할 수 있습니다.

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}​

인라인 스타일을 사용하지 마십시오!다음은 http://jsfiddle.net/S5bKq/ 의 작동 예입니다.

요즘은 변환이 더 보편적으로 지원되기 때문에 팝업의 너비/높이를 몰라도 이 작업을 수행할 수 있습니다.

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

쉬움! JS Fiddle 여기: http://jsfiddle.net/LgSZV/

업데이트: https://css-tricks.com/centering-css-complete-guide/ 에서 CSS 센터링에 대한 꽤 철저한 가이드를 확인하십시오.눈알이 많이 나오는 것 같아 이 답변에 덧붙입니다.

그것은 어떤 물체에도 효과가 있을 것입니다.크기를 모르더라도:

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

너비와 높이를 정하면 당신은 좋습니다.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

요소 치수를 유연하게 하려면(기존 브라우저는 신경쓰지 않음) Xwipout X의 답변을 따릅니다.

HTML 5 및 CSS 3을 사용하면 더 쉬워집니다.

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

플렉스를 사용합니다.훨씬 단순하며 사용자 환경에 상관없이 작동합니다.div크기:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

고정된 경우div절대 위치는 위에서 50%, 왼쪽에서 50%, 왼쪽에서 50% 높이와 너비의 절반을 차지하는 마이너스 여백입니다.요구사항에 맞게 조정:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

나는 CSS로 이것을 할 것입니다:

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

HTML에서 다음을 수행합니다.

<div class="centered"></div>

이제 다음을 사용하여 이 작업을 수행할 수 있습니다.grid코드 줄 수가 적은 레이아웃입니다.

.center-this{
  display: grid;
  place-items: center;
  align-content: center;
}
<div class="center-this">
  <div>
    Hello
  </div>
</div>

이것을 먹어보세요.

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

아니면 이거.

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

해결책을 찾는 사람이 있다면,

나는 이걸 발견했어.

제가 찾은 최고의 해결책입니다!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

맛있게 드시길 바랍니다!

블록을 중앙에 쉽게 표시할 수 있는 또 다른 유연한 접근 방식: 기본 텍스트 정렬 사용line-height그리고.text-align.

솔루션:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

HTML 샘플:

<div class="parent">
  <div class="child">My center block</div>
</div>

우리가 만드는div.parent풀스크린, 그리고 그의 싱글 아이.div.child텍스트로 정렬display: inline-block.

장점:

  • 유연성, 절대값 없음
  • 지원 크기 조정
  • 모바일에서 잘 작동합니다.

JSFidle의 간단한 예: https://jsfiddle.net/k9u6ma8g

절대 위치를 사용하지 않는 대체 솔루션:
저는 많은 입장에서 절대적인 대답을 봅니다.저는 다른 것을 깨지 않고는 절대적인 위치를 사용할 수 없었습니다.그래서 그렇게 할 수 없었던 사람들을 위해, 제가 한 일은 다음과 같습니다.
https://stackoverflow.com/a/58622840/6546317 (다른 질문에 대한 답변으로 제공됨).

솔루션은 수직 중심화에만 초점을 맞춥니다. 왜냐하면 내 자식 요소는 이미 수평 중심화되어 있기 때문입니다. 그러나 다른 방법으로 수평 중심화할 수 없는 경우에도 동일하게 적용될 수 있습니다.

사용해 보십시오.

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

언급URL : https://stackoverflow.com/questions/9862167/positioning-div-element-at-center-of-screen

반응형

'programing' 카테고리의 다른 글

케라스에서 HDF5 파일에서 모델을 로드하는 방법은 무엇입니까?  (0) 2023.08.04
NumberPicker에서 소프트 키보드 사용  (0) 2023.08.04
Unix 새 줄에서 Windows 새 줄로(Windows의 경우  (0) 2023.08.04
JavaScript에서 날짜를 MM/dd/yyyy로 형식 지정  (0) 2023.08.04
레이아웃으로 하나의 뷰를 부풀리는 방법  (0) 2023.08.04

'programing'의 다른글

  • 현재글포지셔닝포지셔닝화면 중앙의 요소

관련글

댓글

티스토리툴바