Sejajarkan gambar di tengah dan tengah dalam div

Saya telah mengikuti div

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

Bagaimana cara menyelaraskan gambar agar berada di tengah dan tengah 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>

Ini juga dapat dilakukan menggunakan tata letak Flexbox:

UKURAN STATIS

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

UKURAN DINAMIS

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>

Saya menemukan contoh di artikel ini , yang sangat membantu menjelaskan cara menggunakan tata letak.

Menurut saya, Anda juga ingin gambar itu diposisikan secara vertikal di dalam wadah. (Saya tidak melihat jawaban apa pun asalkan)

Biola bekerja:

1. Solusi CSS murni
2. Tidak merusak aliran dokumen (tidak ada pelampung atau penentuan posisi absolut)
3. Kompatibilitas lintas browser (bahkan IE6)
4. Benar-benar responsif.

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

Catatan: solusi ini baik untuk menyelaraskan elemen apa pun dalam elemen apa pun. untuk IE7, ketika menerapkan .Centeredkelas pada elemen blok, Anda harus menggunakan trik lain untuk membuatnya inline-blockbekerja. (itu karena IE6 / IE7 tidak bisa digunakan dengan inline-block pada elemen blok)

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

Anda dapat melakukan ini dengan mudah dengan menggunakan properti 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;
}

Saya masih memiliki beberapa masalah dengan solusi lain yang disajikan di sini. Akhirnya ini bekerja paling baik untuk saya:

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

Anda dapat membaca lebih lanjut tentang pendekatan itu di halaman ini .

Pada dasarnya, mengatur margin kanan dan kiri ke otomatis akan menyebabkan gambar menjadi rata tengah.

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

Ini akan menjadi pendekatan yang lebih sederhana

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

Jawaban Daaawx bekerja, tapi saya pikir akan lebih bersih jika kita menghilangkan inline 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>

mengatur img untuk ditampilkan: inline-block sambil mengatur div superior ke text-align: center akan melakukan pekerjaan juga

EDIT: untuk orang-orang yang bermain dengan tampilan: inline-block >>> jangan lupa bahwa misalnya dua divs suka

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

benar-benar tidak memiliki ruang di antara mereka (seperti yang terlihat di sini).

Hanya dasar untuk menghindari kesenjangan (inline block inherent) di antara mereka. Kesenjangan ini dapat dilihat antara setiap dua kata yang saya tulis sekarang! :-) Jadi .. semoga ini membantu beberapa dari Anda.

SEDERHANA. 2018. FlexBox. Untuk Memeriksa Dukungan Browser - Dapatkah Saya Menggunakan

Solusi Minimal:

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

Untuk mendapatkan dukungan browser seluas mungkin:

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

Saya sudah mencoba banyak pendekatan tetapi hanya yang ini bekerja untuk beberapa elemen inline di dalam wadah. Berikut adalah kode untuk menyelaraskan semua yang ada di div di tengah.

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>

Kode contoh ada di sini: https://jsfiddle.net/yogendrasinh/2vq0c68m/

File CSS

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

Coba kode minimal ini:

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

Dan CSS:

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

Ya, kita di tahun 2016 ... mengapa tidak menggunakan flexbox? Ini juga responsif. Nikmati.

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

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

banyak jawaban menyarankan untuk digunakan margin:0 autotetapi ini hanya berfungsi ketika elemen yang Anda coba buat terpusat tidak mengambang di kiri atau kanan, yaitu floatatribut css tidak disetel. Untuk melakukan ini, terapkan displayatribut ke table-celldan kemudian terapkan margin kiri dan kanan ke otomatis sehingga gaya Anda akan terlihat sepertistyle="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;
}

Untuk pusat secara horizontal

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

Metode lain:

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

Untuk pusat secara vertikal, cukup cantumkan:

   #over img {

           vertical-align: middle;
        }

Ini bekerja untuk saya:

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

ini berhasil bagi saya.

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

'Catatan: tidak memiliki kelas css yang dikaitkan dengan' BrandImage 'dalam kasus ini

CSS:

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

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

Ini bekerja untuk saya ketika Anda harus memusatkan gambar dan div orangtua Anda ke gambar memiliki seluruh layar. yaitu tinggi: 100% dan lebar: 100%

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

Gunakan penentuan posisi. Berikut ini bekerja untuk saya ...

Dengan zoom ke tengah gambar (gambar mengisi 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;
}

Tanpa memperbesar ke tengah gambar (gambar tidak mengisi 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;
    }

Jawaban yang ditandai untuk ini tidak akan menyelaraskan gambar secara vertikal. Solusi yang cocok untuk browser modern adalah flexbox. Wadah fleksibel dapat dikonfigurasi untuk menyelaraskan item-itemnya baik secara horizontal maupun vertikal.

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

Anda dapat melihat pada solusi ini:

Menengahkan gambar secara horizontal dan vertikal dalam sebuah kotak

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

Cara sederhana adalah membuat gaya terpisah untuk div dan gambar dan kemudian memposisikannya secara independen. Katakanlah jika saya ingin mengatur posisi gambar saya menjadi 50%, maka saya akan memiliki kode yang terlihat seperti berikut ini ....

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

Ubah nilai ketinggian untuk kebutuhan Anda.

Ini seharusnya bekerja.

PENTING UNTUK UJI: Untuk Menjalankan cuplikan kode klik tombol kiri RUN cuplikan kode , lalu taut kanan halaman penuh

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