จัดรูปภาพให้อยู่กึ่งกลางและกึ่งกลางภายใน div

ฉันมีกองกำลังติดตาม

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</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 ไม่เล่นได้ดีกับ inline-block ในองค์ประกอบของบล็อก)

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

ฉันยังคงมีปัญหากับวิธีแก้ไขปัญหาอื่น ๆ ที่นำเสนอที่นี่ ในที่สุดนี้ทำงานได้ดีที่สุดสำหรับฉัน:

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีการดังกล่าวได้ที่หน้านี้

โดยทั่วไปการตั้งค่าระยะขอบด้านซ้ายและขวาเป็นอัตโนมัติจะทำให้ภาพจัดกึ่งกลาง

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

นี่จะเป็นวิธีที่ง่ายกว่า

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

คำตอบของ Daaawx ใช้ได้ แต่ฉันคิดว่ามันจะสะอาดกว่าถ้าเรากำจัด 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>

การตั้งค่าimgให้แสดง: บล็อกแบบอินไลน์ในขณะที่ตั้งค่าdiv ที่เหนือกว่าเป็นจัดแนวข้อความ: ศูนย์กลางจะทำงานเช่นกัน

แก้ไข: สำหรับคนที่เล่นด้วยจอแสดงผล: อินไลน์บล็อค >>> อย่าลืมว่าเช่นสอง divs เช่น

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

ไม่มีช่องว่างระหว่างพวกเขา (เท่าที่เห็นที่นี่)

เพียงพื้นฐานเพื่อหลีกเลี่ยงช่องว่างเหล่านี้ (บล็อกอินไลน์โดยธรรมชาติ) ระหว่างพวกเขา ช่องว่างเหล่านี้สามารถมองเห็นได้ระหว่างคำสองคำที่ฉันกำลังเขียนอยู่ตอนนี้! :-) ดังนั้น .. หวังว่านี่จะช่วยให้คุณบางคน

SIMPLE 2018. FlexBox ในการตรวจสอบการสนับสนุนเบราว์เซอร์ - ฉันสามารถใช้

วิธีแก้ปัญหาน้อยที่สุดได้ไหม:

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

ในการรับการสนับสนุนเบราว์เซอร์ที่กว้างที่สุดให้ทำดังนี้

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

ฉันได้ลองหลายวิธีแล้ว แต่วิธีนี้ใช้ได้กับองค์ประกอบแบบอินไลน์หลายอย่างภายใน div container นี่คือรหัสเพื่อจัดเรียงทุกอย่างใน div ตรงกลาง

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>

โค้ดตัวอย่างอยู่ที่นี่: https://jsfiddle.net/yogendrasinh/2vq0c68m/

ไฟล์ CSS

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

ลองโค้ดขั้นต่ำนี้:

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

และ CSS:

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

เราอยู่ในปี 2016 ... ทำไมไม่ใช้ flexbox นอกจากนี้ยังตอบสนอง สนุก.

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

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

คำตอบมากมายแนะนำให้ใช้margin:0 autoแต่สิ่งนี้ใช้ได้เฉพาะเมื่อองค์ประกอบที่คุณพยายามทำให้อยู่กึ่งกลางไม่ลอยไปทางซ้ายหรือขวานั่นคือfloatคุณสมบัติ css ที่ไม่ได้ตั้งค่า เพื่อที่จะทำสิ่งนี้ให้ใช้displayคุณลักษณะกับtable-cellจากนั้นใช้ระยะขอบซ้ายและขวาเพื่ออัตโนมัติเพื่อให้สไตล์ของคุณดูเหมือน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;
}

สำหรับศูนย์แนวนอนเพียงแค่ใส่

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

วิธีอื่น:

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

สำหรับศูนย์กลางในแนวตั้งเพียงแค่ใส่:

   #over img {

           vertical-align: middle;
        }

สิ่งนี้ใช้ได้กับฉัน:

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

นี้ได้เคล็ดลับสำหรับฉัน.

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

'หมายเหตุ: ไม่มีคลาส css ที่อ้างถึง' BrandImage 'ในกรณีนี้

CSS:

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

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

สิ่งนี้ใช้ได้ผลกับฉันเมื่อคุณต้องจัดแนวภาพให้ตรงกลางและ div parent ของคุณกับภาพนั้นครอบคลุมทั้งหน้าจอ ie ความสูง: 100% และความกว้าง: 100%

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

ใช้การวางตำแหน่ง ต่อไปนี้ทำงานให้ฉัน ...

เมื่อซูมไปที่กึ่งกลางของภาพ (ภาพเติม 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;
}

หากไม่มีการซูมไปที่กึ่งกลางของภาพ (ภาพไม่ได้เติม 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;
    }

คำตอบที่ทำเครื่องหมายไว้สำหรับสิ่งนี้จะไม่จัดแนวภาพในแนวตั้ง ทางออกที่เหมาะสมสำหรับเบราว์เซอร์รุ่นใหม่คือ flexbox คอนเทนเนอร์แบบยืดหยุ่นสามารถกำหนดค่าให้จัดแนวรายการได้ทั้งแนวนอนและแนวตั้ง

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

คุณสามารถดูวิธีแก้ปัญหานี้:

จัดกึ่งกลางภาพในแนวนอนและแนวตั้งในกล่อง

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

วิธีง่ายๆคือการสร้างสไตล์ที่แยกกันสำหรับทั้ง div และรูปภาพจากนั้นจัดวางตำแหน่งอย่างอิสระ พูดถ้าฉันต้องการตั้งตำแหน่งภาพของฉันเป็น 50% แล้วฉันจะมีรหัสที่มีลักษณะดังต่อไปนี้ ....

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

ปรับเปลี่ยนค่าความสูงสำหรับความต้องการของคุณ

สิ่งนี้น่าจะใช้ได้

สิ่งสำคัญสำหรับการทดสอบ:ในการเรียกใช้ข้อมูลโค้ดคลิกปุ่มซ้ายRUN code snippetจากนั้นลิงค์ด้านขวาเต็มหน้า

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