Căn chỉnh hình ảnh ở giữa và giữa trong div

Tôi đã theo div

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

Làm thế nào để căn chỉnh hình ảnh sao cho nằm ở giữa và giữa của 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>

Câu đố

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

Điều này cũng có thể được thực hiện bằng cách sử dụng bố trí Flexbox:

KÍCH THƯỚC TÌNH TRẠNG

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

KÍCH THƯỚC NĂNG ĐỘNG

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>

Tôi đã tìm thấy ví dụ trong bài viết này , một công việc tuyệt vời giải thích cách sử dụng bố cục.

Dường như với tôi rằng bạn cũng muốn hình ảnh đó được căn giữa theo chiều dọc trong container. (Tôi không thấy bất kỳ câu trả lời nào cung cấp điều đó)

Fiddle làm việc:

1. Giải pháp CSS thuần túy
2. Không phá vỡ luồng tài liệu (không nổi hoặc định vị tuyệt đối)
3. Tương thích trình duyệt chéo (thậm chí IE6)
4. Hoàn toàn đáp ứng.

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

Lưu ý: giải pháp này là tốt để căn chỉnh bất kỳ yếu tố nào trong bất kỳ yếu tố nào. đối với IE7, khi áp dụng .Centeredlớp trên các phần tử khối, bạn sẽ phải sử dụng một mẹo khác để inline-blocklàm việc. (bởi vì IE6 / IE7 không chơi tốt với khối nội tuyến trên các thành phần khối)

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

Bạn có thể làm điều này một cách dễ dàng bằng cách sử dụng display: flex css property

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

Tôi vẫn có một số vấn đề với giải pháp khác được trình bày ở đây. Cuối cùng, điều này làm việc tốt nhất cho tôi:

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

Bạn có thể đọc thêm về cách tiếp cận đó tại trang này .

Về cơ bản, cài đặt lề phải và trái sang tự động sẽ khiến hình ảnh được căn giữa.

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

Đây sẽ là một cách tiếp cận đơn giản hơn

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

Câu trả lời của Daaawx hoạt động, nhưng tôi nghĩ nó sẽ sạch hơn nếu chúng ta loại bỏ css nội tuyến.

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>

đặt img để hiển thị: khối nội tuyến trong khi đã đặt div ưu việt thành text-align: centre cũng sẽ thực hiện công việc

EDIT: gửi tới những người đang chơi với màn hình: block-inline >>> đừng quên điều đó, ví dụ như hai div như

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

thực sự không có khoảng cách giữa chúng (như đã thấy ở đây).

Chỉ cần cơ bản để tránh những khoảng trống (khối nội tuyến vốn có) giữa chúng. Những khoảng trống này có thể được nhìn thấy giữa mỗi hai từ tôi đang viết ngay bây giờ! :-) Vì vậy, hy vọng điều này sẽ giúp một số bạn.

ĐƠN GIẢN. 2018. FlexBox. Để kiểm tra hỗ trợ trình duyệt - Tôi có thể sử dụng

giải pháp tối thiểu:

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

Để có được sự hỗ trợ trình duyệt rộng nhất có thể:

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

Tôi đã thử nhiều cách tiếp cận nhưng chỉ có cách tiếp cận này hoạt động với nhiều yếu tố nội tuyến bên trong div container. Đây là mã để sắp xếp mọi thứ trong div ở giữa.

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>

Mã mẫu có tại đây: https://jsfiddle.net/yogendrasinh/2vq0c68m/

Tệp CSS

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

Hãy thử mã tối thiểu này:

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

Và CSS:

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

Chà, chúng ta đang ở trong năm 2016 ... tại sao không sử dụng flexbox? Nó cũng đáp ứng. Thưởng thức.

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

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

nhiều câu trả lời gợi ý sử dụng margin:0 autonhưng điều này chỉ hoạt động khi phần tử bạn cố gắng làm trung tâm không nổi bên trái hoặc bên phải, đó là floatthuộc tính css không được đặt. Để thực hiện điều này, hãy áp dụng displaythuộc tính này table-cellvà sau đó áp dụng lề trái và phải để tự động để kiểu của bạn sẽ giống như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;
}

Đối với trung tâm theo chiều ngang Chỉ cần đặt

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

Một phương pháp khác:

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

Đối với trung tâm theo chiều dọc Chỉ cần đặt:

   #over img {

           vertical-align: middle;
        }

Điều này làm việc cho tôi:

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

điều này đã lừa tôi

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

'Lưu ý: không có lớp css bị giả định thành' BrandImage 'trong trường hợp này

CSS:

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

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

Điều này làm việc cho tôi khi bạn phải căn giữa hình ảnh và div cha mẹ của bạn với hình ảnh có toàn bộ màn hình. tức là chiều cao: 100% và chiều rộng: 100%

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

Sử dụng định vị. Sau đây làm việc cho tôi ...

Với thu phóng đến trung tâm của hình ảnh (hình ảnh lấp đầy 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;
}

Không phóng to đến trung tâm của hình ảnh (hình ảnh không lấp đầy 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;
    }

Câu trả lời được đánh dấu cho điều này sẽ không căn chỉnh theo chiều dọc của hình ảnh. Một giải pháp phù hợp cho các trình duyệt hiện đại là flexbox. Một thùng chứa flex có thể được cấu hình để sắp xếp các mục của nó theo cả chiều ngang và chiều dọc.

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

Bạn có thể xem giải pháp này:

Căn giữa theo chiều ngang và chiều dọc một hình ảnh trong hộp

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

Một cách đơn giản sẽ là tạo các kiểu riêng biệt cho cả div và hình ảnh và sau đó định vị chúng một cách độc lập. Nói rằng nếu tôi muốn đặt vị trí hình ảnh của mình thành 50%, thì tôi sẽ có mã giống như sau ....

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

Sửa đổi giá trị chiều cao cho nhu cầu của bạn.

Điều này nên làm việc.

QUAN TRỌNG ĐỂ KIỂM TRA: Để chạy đoạn mã nhấp vào nút bên trái Đoạn mã RUN , sau đó liên kết bên phải Trang đầy đủ

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