화면 중앙에 <div> 요소 배치

134

화면 크기에 관계없이 화면 중앙에 <div>(또는 <table>) 요소 를 배치하고 싶습니다 . 다시 말해 'top'과 'bottom'에 남은 공간이 동일해야하고 'right'와 'left'에 남은 공간이 동일해야합니다. 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>

javascript css html

— Sumit
소스

1

의 중복 가능성 방법 정렬은 <DIV> 페이지의 중간에

— Purag

안녕 Purmou, 당신은 페이지의 중간에 배치하는 경우, 즉 상단과 하단 공간이 아닌 왼쪽과 오른쪽 공간에 대해 언급 한 질문!

— sumit

1

CSS를 사용하여 수직으로 중심을

— 맞추는

의 중복 가능성 방법은 사업부의 사업부를 중앙에 - 수평?

— bjb568

201

너비와 높이가 고정되어있는 쉬운 방법 :

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

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

— 아인슈타인
소스

13

동적 높이를 찾는 사람들을 위해 : stackoverflow.com/questions/396145/…

— pulkitsinghal

1

@ woho87 왜 인라인 스타일을 사용하지 않습니까? 잘 알려진 이유 때문에 또는 특정 예에서 알아야 할 것이 더 있습니까?

— Sharky

@ KatrinRaimond 그것은 잘 알려진 이유로, 여기에 stackoverflow.com/questions/2612483/… 및 여기 webdesign.about.com/od/css/a/aa073106.htm에 문서화되어 있습니다 .

— Alex

그러나 divElement의 상단을 '%'단위로 설정하면 divElement가 상대 요소 내에 배치되지 않으면 divElement가 수직 공간을 차지합니다.

— sudip

position : fixed 또는 position : absolute?

— Kurkula

151

요즘에는 변환이 더 편 재적으로 지원되므로 팝업의 너비 / 높이를 알지 않고도이 작업을 수행 할 수 있습니다

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

쉬운! 여기 JSFiddle : http://jsfiddle.net/LgSZV/

업데이트 : CSS 센터링에 대한 철저한 가이드는 https://css-tricks.com/centering-css-complete-guide/ 를 확인하십시오 . 많은 안구가있는 것처럼이 답변에 추가하십시오.

— XwipeoutX
소스

1

팝업의 내용이을 사용하는 overflow:auto경우 IE9에서 스크롤이 조여집니다. :(

— joescii

2

유비쿼터스가 아닙니다. IE8은 스틸 사진 브라우저 점유율의 20 %를 하고 그것을 지원하지 않습니다 . 따라서 IE9 +에만 이것을 사용하십시오.

— fotanus

7

높이와 너비를 지정하거나 Javascript를 사용할 필요가없는 유일한 솔루션 인 경우 +1입니다.

— Jan Derk

개발자가 IE 9 지원을 중단하면 @fotanus <사용자는 브라우저를 마이그레이션하거나 업데이트합니다.

— Diego Vieira

@ DIegoVieira 불행히도 상황이 작동하지 않습니다. 커먼즈의 비극을 보십시오 . 따라서 사람들은이 점유율을 잃고 싶지 않기 때문에 IE8을 계속 지원할 것이며 작동하기 때문에 계속 사용할 것입니다.

— fotanus

33

너비와 높이를 설정하면 좋습니다.

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

요소 크기를 유연하게하고 (레거시 브라우저를 신경 쓰지 않으 려면) XwipeoutX 의 대답 을 따르십시오 .

— 에릭 아이그너
소스

1

이것은 가장 깨끗하고 간단한 답변이며 모바일 친화적 입니다. +1

— 녹

22

모든 객체에서 작동합니다. 크기를 모르더라도

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

— 빛나는
소스

17

이제 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;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— 다니엘 데 레온
소스

12

고정 div위치를 고정 하면 상단과 50 %에서 왼쪽과 음의 여백 상단과 왼쪽에서 각각 높이와 너비의 절반에서 50 % 로 고정 됩니다. 필요에 따라 조정하십시오.

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

— 엘크 란
소스

9

flex를 사용하십시오 . 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>

스 니펫 확장

— 통조림
소스

3

CSS 에서이 작업을 수행합니다.

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

그런 다음 HTML에서 :

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

— 에두아르도라고 아길라 르
소스

0

이 시도

<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>

— 달리
소스

0

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

나는 이것을 찾았다,

내가 찾은 최고의 솔루션!

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

당신이 즐기시기 바랍니다!

— 크리스토퍼 앳 우드
소스

0

중앙에 디스플레이 블록에 또 다른 쉬운 유연한 접근 방식 : 네이티브 텍스트 정렬을 사용 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.

장점 :

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

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

— 파벨 쇼로 호프
소스

0

위치 절대를 사용하지 않는 대체 솔루션 :
위치 절대적인 답변이 많이 있습니다. 다른 것을 깨지 않고 절대 위치를 사용할 수 없었습니다. 따라서 잘 할 수없는 사람들을 위해 여기에 내가 한 일이 있습니다 :
https://stackoverflow.com/a/58622840/6546317 (다른 질문에 대한 답변으로 게시).

내 자식 요소가 이미 가로로 중심에 있지만 다른 방법으로 가로로 가운데에 맞지 않으면 동일한 방식으로 적용 할 수 있기 때문에 솔루션은 세로 중심에 중점을 둡니다.

— 레독
소스

-2

이 시도:

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

— 사용자
소스

2

이것은 실제로 받아 들여진 답변과 동일합니다

— apaul

네, 그러나 여기에 나는 여백 상단과 왼쪽의 작업을 설명합니다 ... 누군가 이것을 모른다 ....

— user3423956

1

그런 다음 효과적으로과 동일 두 번째 대답

— apaul