가능한 중복은 :
How to center div horizontally and verticallyHTML 페이지의 중심에 이미지를 두는 방법은 무엇입니까?
나는 몇 가지 물건을 시도하지만 잘 작동하는 것 같다되어 ... 수평과 수직 HTML 페이지의 중앙에 이미지를 넣을 필요가있다. 내가 사용하는 수평 정렬을 얻으려면 <body style="text-align:center">
그리고 제대로 작동하지만 수직 정렬은 어떻게됩니까?
관련
경우 :
X는
Y 이미지 높이, 이미지의 폭 다음
:
img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
그러나 귀하의 사이트에 유일한 요소는이 이미지 일 경우에만이 솔루션이 유효 명심하십시오. 나는 그것이 여기의 경우라고 생각한다.
이 방법을 사용하면 유동성의 이점을 얻을 수 있습니다. 누군가의 화면이 얼마나 큰지 (또는 작은 지) 중요하지 않습니다. 이미지는 항상 중간에 있습니다.
X는 이 코드 ??? – AminM
이미지의 크기를 모를 경우'margin-left'와'margin-top' 행을 다음과 같이 바꿉니다 :'transform : translate (-50 %, -50 %);' –
이봐 지금 당신은 몸 배경 이미지
을주고 등과 같은 background-position:center center;
을 설정할 수 있습니다이
body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}
나를 위해 작동하지 않습니다 –
는 다음 CSS (이미지에 맞게 크기를 변경을 사용하여 컨테이너 사업부에서 이미지를 넣습니다.
.imageContainer{
position: absolute;
width: 100px; /*the image width*/
height: 100px; /*the image height*/
left: 50%;
top: 50%;
margin-left: -50px; /*half the image width*/
margin-top: -50px; /*half the image height*/
}
당신이려고하고 정확히 효과에 따라 다른 옵션들이있다 ..
나는이 이미 여기에보다 더 몇 번 대답했습니다 확신 – Joonas
HTTP :. // 유래입니다 크리스 Coyier 그냥이 길에 조각 다시 가치를 읽기를했다 .com/questions/10296015/how-to-c enter-div-horizontally-and-vertically – Alvaro
일반적인 'display : table-cell' 답변과 달리 알 수없는 크기의 이미지가있는 IE7에서 작동하는 예제입니다 (문제가있는 경우) : http://stackoverflow.com/questions/10998614/ie7-vertical-align-middle-not-working/10998683 # 10998683 – thirtydot