div 내에서 가운데와 가운데에 이미지 정렬 height:100%> <img

나는 div를 따랐다.

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

div의 가운데와 가운데에 위치하도록 이미지를 정렬하는 방법은 무엇입니까?

답변

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
<div id="over" style="position:absolute; width:100%; height:100%">
  <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

스 니펫 확장

JSFiddle

답변

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

답변

Flexbox 레이아웃을 사용하여 수행 할 수도 있습니다.

정적 크기 

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}
<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

스 니펫 확장

동적 크기 

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}
<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

스 니펫 확장

이 기사 에서 예제를 찾았습니다 . 레이아웃을 사용하는 방법을 설명하는 훌륭한 작업입니다.

답변

그 이미지가 컨테이너 내에서 세로로 가운데에 오기를 원했던 것 같습니다. (나는 그것을 제공 한 답변을 보지 못했다)

일 바이올린 :

  1. 순수한 CSS 솔루션
  2. 문서 흐름을 중단하지 않음 (플로트 또는 절대 위치 지정 없음)
  3. 크로스 브라우저 호환성 (IE6조차도)
  4. 완벽하게 반응합니다.

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

참고 : 이 솔루션은 요소 내의 요소를 정렬하는 것이 좋습니다. IE7의 경우 .Centered블록 요소에 클래스를 적용 할 때 다른 트릭을 사용하여 inline-block작업해야합니다. (IE6 / IE7은 블록 요소에서 인라인 블록으로 잘 재생되지 않기 때문에)

답변

img.centered {
   display: block;
   margin: auto auto;
}

답변

display : flex css 속성을 사용하면이 작업을 쉽게 수행 할 수 있습니다. 

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

답변

#over {position:relative; text-align:center;
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}