จัดภาพให้กึ่งกลาง ง่ายๆ แต่ปวดกบาลครับ

ตามหัวข้อเลยครับ วันก่อนลองทำเว็บนึงดู ปรากฏว่า ต้องจัดภาพ <img> ให้อยู่กึ่งกลาง <div> ก็ไม่มีอะไรมากครับ จัดไปเลยลวกจิ้มเลยครับ

<div style="text-align:center;height:555px;">
      <img src="picture.jpg" />
</div>

มันก็กึ่งกลางนะครับ แต่เจ้ากรรม รอบนี้มันดันมีความสูงเข้ามาเกี่ยวข้องด้วยครับ ทำไงดีวะเนี่ย (height:555px;) มันกึ่งกลางแค่ซ้าย-ขวา แต่บน-ล่างมันดันไม่กึ่งกลางครับ ผมก็เลยไปหาวิธีมามากมาย หลายๆ เว็บ คือที่ต้องบอกว่ามากมายเพราะ ผมชอบโค๊ดอะไรที่มันง่ายๆ บรรทัดน้อยๆ อย่างว่าละครับ ขี้เกียจแถมความจำสั้นอีกต่างหาก เลยเอามาแปะไว้หน่อยกันลืม สำหรับคนที่ต้องการจะให้รูปภาพมันอยู่ตรงกลาง ทั้งบนล่างซ้ายขวาครับ แล้วจะบอกว่าวิธีนี้ใช้งานได้กับงานเว็บไซต์แบบ mobile responsive ที่สามารถยดหดก็ยังกึ่งกลางได้ครับ

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

ความหมายของโค๊ดด้านบนตามภาพเลยครับง่ายๆ

แค่นี้ละครับ ไปละครับ

เครดิตเว็บ stackoverflow