Wyrównaj obraz do środka i środka w obrębie div

Mam następujące div

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

Jak wyrównać obraz, aby znajdował się na środku i środku 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>

Można to również zrobić za pomocą układu Flexbox:

ROZMIAR STATYCZNY

.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>

ROZMIAR DYNAMICZNY

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>

Znalazłem przykład w tym artykule , który świetnie się spisuje, wyjaśniając, jak używać układu.

Wydaje mi się, że chciałeś również, aby ten obraz był wyśrodkowany pionowo w kontenerze. (Nie widziałem żadnej odpowiedzi, która to dałaby)

Working Fiddle:

1. Rozwiązanie Pure CSS
2. Nie przerywa przepływu dokumentów (brak pływaków lub pozycjonowanie bezwzględne)
3. Kompatybilność z różnymi przeglądarkami (nawet IE6)
4. Całkowicie responsywny.

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;
}

Uwaga: to rozwiązanie dobrze jest wyrównać dowolny element w dowolnym elemencie. w przypadku IE7, gdy zastosujesz .Centeredklasę do elementów blokowych, będziesz musiał użyć innej sztuczki, aby uzyskać inline-blockdziałanie. (ponieważ ponieważ IE6 / IE7 nie działa dobrze z wbudowanym blokiem na elementach bloku)

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

Możesz to zrobić z łatwością za pomocą właściwości 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;
}

Nadal miałem problemy z innym rozwiązaniem przedstawionym tutaj. Wreszcie to działało najlepiej dla mnie:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

css3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

Możesz przeczytać więcej o tym podejściu na tej stronie .

Zasadniczo ustawienie prawego i lewego marginesu na auto spowoduje wyrównanie obrazu do środka.

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

To byłoby prostsze podejście

#over > img{
    display: block;
    margin:0 auto; 
}

Odpowiedź Daaawx działa, ale myślę, że byłoby czystsze, gdybyśmy wyeliminowali wbudowany css.

body {
	margin: 0;
}

#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="example" id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

ustawienie img do display: inline-block podczas Po ustawieniu najwyższej div do text-align: center również wykona zadanie

EDYCJA: do tych, którzy bawią się z displayem: blok wbudowany >>> nie zapomnij, że np. Dwa divy lubią

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

naprawdę nie ma między nimi spacji (jak widać tutaj).

Po prostu podstawowe, aby uniknąć tych (nieodłącznych bloków) luk między nimi. Luki te można zobaczyć między każdymi dwoma słowami, które piszę teraz! :-) Więc .. mam nadzieję, że to pomoże niektórym z was.

PROSTY. 2018. FlexBox. Aby sprawdzić obsługę przeglądarki - czy mogę użyć

minimalnego rozwiązania:

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}

Aby uzyskać możliwie najszerszą obsługę przeglądarki:

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}

Próbowałem wielu podejść, ale tylko ten działa dla wielu elementów śródliniowych wewnątrz div kontenera. Oto kod do wyrównania wszystkiego w div na środku.

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

Przykładowy kod jest tutaj: https://jsfiddle.net/yogendrasinh/2vq0c68m/

Plik CSS

.over {
    display : block;
    margin : 0px auto;

Wypróbuj ten minimalny kod:

<div class="outer">
    <img src="image.png"/>
</div>

I CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

Jesteśmy w 2016 roku ... dlaczego nie skorzystać z Flexboksa? Jest również responsywny. Cieszyć się.

#over{
display:flex;
align-items:center;
justify-content:center;
}

<div id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

wiele odpowiedzi sugeruje użycie, margin:0 autoale działa to tylko wtedy, gdy element, który próbujesz wyśrodkować, nie unosi się po lewej lub prawej stronie, to znaczy floatatrybut css nie jest ustawiony. Aby to zrobić, zastosuj displayatrybut do, table-cella następnie zastosuj margines lewy i prawy do auto, aby Twój styl wyglądałstyle="display:table-cell;margin:0 auto;"

    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>

HTML:

<div id="over">
    <img src="img.png">
</div>

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}

Do centrum poziomo Po prostu połóż

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

Inna metoda:

#over img {
    display: inline-block;
    text-align: center;
}

Dla środka w pionie Wystarczy umieścić:

   #over img {

           vertical-align: middle;
        }

To działało dla mnie:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}

to załatwiło sprawę.

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

„Uwaga: w tym przypadku nie należy przypisywać klasy css do„ BrandImage ”

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}

To zadziałało dla mnie, gdy musisz wyśrodkować wyrównywanie obrazu, a Twój div div do obrazu ma cały ekran. tj. wysokość: 100% i szerokość: 100%

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

Użyj pozycjonowania. Poniższe działało dla mnie ...

Przy powiększeniu do środka obrazu (obraz wypełnia div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Bez powiększenia do środka obrazu (obraz nie wypełnia div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

Zaznaczona odpowiedź nie spowoduje wyrównania obrazu w pionie. Odpowiednim rozwiązaniem dla nowoczesnych przeglądarek jest Flexbox. Elastyczny pojemnik można skonfigurować tak, aby wyrównywał jego elementy zarówno w poziomie, jak i w pionie.

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>

Możesz rzucić okiem na to rozwiązanie:

Centrowanie w poziomie i w pionie obrazu w pudełku

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

Prostym sposobem byłoby utworzenie osobnych stylów dla div i obrazu, a następnie ich niezależne ustawienie. Powiedz, że jeśli chcę ustawić pozycję obrazu na 50%, to mam kod, który wygląda następująco ....

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}

<div id="over">
 <img src="img.png" id="img">
</div>

#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

Zmodyfikuj wartość wysokości do swoich potrzeb.

To powinno działać.

WAŻNE DO TESTU: Aby uruchomić fragment kodu, kliknij lewy przycisk URUCHOM fragment kodu , a następnie prawy link Pełna strona

#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}

<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />
</div>