화면 크기에 관계없이 DIV를 페이지 중앙에 배치
아래 div 컨테이너를 화면 크기에 관계없이 페이지 중앙에 사이트가 나타나도록 중앙에 배치하고 싶습니다.
http://penarthpc.com/~http://flashboy/
나는 조금 놀았지만 뭔가 부족한 것 같다.
이 문제의 해결책은auto위해서marginDIV 자체에 어느 정도의 폭을 제공합니다.
div.centered {
margin-left:auto;
margin-right:auto;
width:80%;
}
페이지 폭에 관계없이 무언가를 중앙에 배치하는 가장 쉬운 방법은margin: auto;높이와 폭이 정의되어 있는 CSS에 표시됩니다.
.class {
height: 50px;
width: 50px;
margin: auto;
}
JSFiddle:http://jsfiddle.net/rVXBH/
.center-div {
width: 600px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
}
이렇게 하면 DIV가 클래스로 중앙에 배치됩니다.center-div수평 및 수직.그margin-left너비의 마이너스 절반이어야 합니다.그margin-top키의 절반에 마이너스여야 합니다.
가로로 가운데만 맞추려면:
.center-div {
width: 600px;
height: 600px;
position: relative;
margin-left: auto;
margin-right: auto;
}
간단하다. 컨테이너 여백을 "0 auto"로 지정하면 된다.
margin: 0 auto;
컨테이너를 중앙에 배치하려면 다음 절차를 수행합니다.
(추가) 이것을 참조해 주세요.
아래 코드는 모든 화면 크기에 적용됩니다.
div.centered {
background-color: rgb(18, 80, 144);
height: 100vh;
}
div.centered span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: rgb(250, 255, 255);
}<div class="centered">
<span>Center</span>
</div>다음은 내가 사용하는 훌륭한 방법입니다. 이 방법은 수직 정렬을 관리하는 보이지 않는 div를 만들기 위해 before selector를 사용합니다.
HTML:
<body>
<div id="outter-div">
<div id="aligned">
<h1>A Nice Title</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
</div>
</body>
CSS:
/* This parent can be any width and height */
#outter-div {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
#outter-div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
#aligned{
display: inline-block;
vertical-align: middle;
width: 300px;
}
jsbin에 데모가 있는 이 게시물에서 확인할 수 있습니다!
다음 CSS는 임의의 요소를 중앙에 배치합니다.
div.className {
text-align: center;
}
언급URL : https://stackoverflow.com/questions/18510951/center-a-div-to-the-center-of-page-regardless-of-screen-size
'programing' 카테고리의 다른 글
| 웹소켓은 p2p(브라우저 대 브라우저) 통신을 허용합니까? (0) | 2023.03.21 |
|---|---|
| Woocommerce 체크아웃 페이지 내부 서버 오류 (0) | 2023.03.21 |
| org.json을 사용하여 값을 null로 설정하려면 어떻게 해야 합니다.Java의 JSONObject? (0) | 2023.03.21 |
| AngularJS에서 IE 캐시를 방지하는 더 나은 방법? (0) | 2023.03.21 |
| 이름이 '[DEFAULT]'인 Firebase 앱이 이미 있습니다(app/duplicate-app). (0) | 2023.03.21 |