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

화면 크기에 관계없이 화면 중앙에 <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>



답변

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

#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%);
}

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

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


답변

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

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

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


답변

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

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


답변

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


답변

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

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


답변

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>