페이지 중앙에 고정 div (위치 : 고정)를 두려고합니다. 지금 까지이 CSS로 작동합니다.
#msg{
border: 1px solid black;
position: fixed;
z-index: 9999;
background-color: white;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
margin: auto;
width: 100px;
height: 100px;
padding: 5px;
}<div id="msg"> Hello </div>작동하지 않는 유일한 것은 div의 크기 (가능한 경우 너비도 높이)를 가져 와서 콘텐츠의 크기와 자동으로 일치시키는 것입니다.
따라서 기본적으로 다음과 같은 일반 div이지만 고정되고 중앙에 배치됩니다.
#msg2{
border: 1px solid;
display: inline-block;
}<div id="msg2"> hello </div>비 javascrpit 솔루션을 찾고 있습니다.
translate상자의 너비 및 / 또는 높이를 미리 알지 않고도 완벽한 중심에 사용할 수 있습니다 .
해결책은 위쪽과 왼쪽에서 50 %를 배치 한 다음 반대쪽 -50 % (X 및 Y 축)로 변환하는 것입니다.
#msg2{
border: 1px solid;
display: inline-block;
position: fixed;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%); /* iOS needed */
transform: translate(-50%, -50%);
}<div id="msg2"> hello </div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다