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