위치 중심 : 고정 요소
position: fixed;동적 너비와 높이로 화면 중앙에 팝업 상자 를 만들고 싶습니다 . 나는 margin: 5% auto;이것을 위해 사용 했다. position: fixed;그것이 없으면 수평으로 잘 가운데에 위치하지만 수직으로는 아닙니다. 를 추가 한 position: fixed;후에도 가로로 가운데에 있지 않습니다.
다음은 완전한 세트입니다.
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>CSS로 화면에서이 상자를 가운데에 배치하려면 어떻게합니까?
당신은 기본적으로 설정해야 top하고 left하는 50%사업부의 왼쪽 상단 모서리를 중심으로하는. 또한 설정해야 margin-top하고 margin-left사업부의 높이와 폭의 부정적인 절반 사업부의 중앙쪽으로 중심을 이동 할 수 있습니다.
따라서 <!DOCTYPE html>(표준 모드)를 제공하면 다음을 수행해야합니다.
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
당신은 수직 및 IE6 / 7 오래된 브라우저를 중심으로 신경 쓰지 않는 경우 또는, 당신은 대신도 추가 할 수 있습니다 left: 0및 right: 0요소에 데 margin-left와 margin-right의 auto고정 위치 요소는 고정 폭을 갖는 그래서 것을 알고 곳의 왼쪽 오른쪽 오프셋이 시작됩니다. 귀하의 경우 따라서 :
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
다시 말하지만 IE에 관심이있는 경우 IE8 +에서만 작동하며 세로가 아닌 가로로만 중심에 위치합니다.
동적 너비와 높이로 화면 중앙에 팝업 상자를 만들고 싶습니다.
다음은 동적 너비로 요소를 가로로 가운데 맞추는 현대적인 방법입니다. 모든 최신 브라우저에서 작동합니다. 지원은 여기에서 볼 수 있습니다 .
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
수직 및 수평 센터링의 경우 다음을 사용할 수 있습니다.
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
공급 업체 접두사 속성을 더 추가 할 수도 있습니다 (예 참조).
또는 원래 CSS를 추가 left: 0하고 추가 right: 0하면 일반 고정되지 않은 요소와 유사하게 작동하며 일반적인 자동 여백 기술이 작동합니다.
.jqbox_innerhtml
{
position: fixed;
width:500px;
height:200px;
background-color:#FFF;
padding:10px;
border:5px solid #CCC;
z-index:200;
margin: 5% auto;
left: 0;
right: 0;
}
DOCTYPEIE에서 올바르게 동작 하려면 유효한 (X) HTML 을 사용해야합니다 (물론 그래야합니다 ..!)
다음과 같은 컨테이너를 추가하십시오.
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
그런 다음이 div에 상자를 넣으면 작업이 수행됩니다.
다음을 추가하십시오.
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
이 솔루션에서는 팝업 div의 너비와 높이를 정의하지 않아도됩니다.
그리고 자바 스크립트는 팝업의 크기를 계산하고 절반에서 위쪽으로 빼는 대신 전체 화면을 채우도록 popupContainer의 크기를 조정합니다 ...
(100 % 높이, display : table-cell을 사용할 때 작동하지 않음; (수직으로 무언가를 가운데에 배치해야 함)) ...
어쨌든 그것은 작동합니다 :)
left: 0;
right: 0;
IE7에서 작동하지 않았습니다.
로 변경
left:auto;
right:auto;
작업을 시작했지만 나머지 브라우저에서는 작동을 멈 춥니 다! 아래 IE7 에이 방법을 사용했습니다.
if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
내부에는 diffenet 너비, 높이 또는없는 요소가있을 수 있습니다. 모두 중심에 있습니다.
당신은 기본적으로 다른로 포장 할 수 div와 그 설정 position에를 fixed.
.bg {
position: fixed;
width: 100%;
}
.jqbox_innerhtml {
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="bg">
<div class="jqbox_innerhtml">
This should be inside a horizontally and vertically centered box.
</div>
</div>위치를 수정하려면 다음을 사용하십시오.
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
I 사용 vw(뷰포트 폭) 및 vh(뷰포트 높이). 뷰포트는 전체 화면입니다. 100vw화면의 총 너비와 100vh총 높이입니다.
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
하나의 가능한 답변 :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Center Background Demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div.centred_background_stage_1 {
position: fixed;
z-index:(-1 );
top: 45%;
left: 50%;
}
div.centred_background_stage_2 {
position: relative;
left: -50%;
top: -208px;
/* % does not work.
According to the
http://reeddesign.co.uk/test/points-pixels.html
6pt is about 8px
In the case of this demo the background
text consists of three lines with
font size 80pt.
3 lines (with space between the lines)
times 80pt is about
~3*(1.3)*80pt*(8px/6pt)~ 416px
50% from the 416px = 208px
*/
text-align: left;
vertical-align: top;
}
#bells_and_wistles_for_the_demo {
font-family: monospace;
font-size: 80pt;
font-weight: bold;
color: #E0E0E0;
}
div.centred_background_foreground {
z-index: 1;
position: relative;
}
</style>
</head>
<body>
<div class="centred_background_stage_1">
<div class="centred_background_stage_2">
<div id="bells_and_wistles_for_the_demo">
World<br/>
Wide<br/>
Web
</div>
</div>
</div>
<div class="centred_background_foreground">
This is a demo for <br/>
<a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
</a>
<br/><br/>
<a href="http://www.starwreck.com/" style="border: 0px;">
<img src="./star_wreck_in_the_perkinnintg.jpg"
style="opacity:0.1;"/>
</a>
<br/>
</div>
</body>
</html>
중앙에 맞지 않는 수평 요소에는 이것을 사용해보십시오.
너비 : calc (너비 : 100 %- 너비가 중심을 벗어난 너비 )
예를 들어 측면 탐색 막대가 200px 인 경우 :
width: calc(100% - 200px);
유일한 해결책은 다음과 같이 align = center 테이블을 사용하는 것입니다.
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
전 세계 사람들이 div를 중심으로하는 것과 같은 근본적인 문제를 해결하기 위해 바보 같은 시간을 낭비하는 것을 믿을 수 없습니다. CSS 솔루션은 모든 브라우저에서 작동하지 않으며 jquery 솔루션은 소프트웨어 계산 솔루션이며 다른 이유로 옵션이 아닙니다.
나는 테이블 사용을 피하기 위해 너무 많은 시간을 반복적으로 낭비했지만 경험상 테이블 싸움을 멈추라 고 말합니다. 센터링 div에 테이블을 사용하십시오. 모든 브라우저에서 항상 작동합니다! 더 이상 걱정하지 마십시오.
참고 URL : https://stackoverflow.com/questions/2005954/center-a-positionfixed-element
'Programming' 카테고리의 다른 글
| Cocoapod를 사용할 때 Xcode 경고 무시 (0) | 2020.02.23 |
|---|---|
| 안드로이드 폰의 방향 확인 (0) | 2020.02.23 |
| 레일스 4 : 사용 가능한 데이터 유형 목록 (0) | 2020.02.23 |
| ListView로 돌아갈 때 스크롤 위치 유지 / 저장 / 복원 (0) | 2020.02.23 |
| iOS 시뮬레이터에서 네트워크를 비활성화 할 수 있습니까? (0) | 2020.02.23 |