Відцентруйте велике зображення невідомого розміру всередині меншого div з прихованим переповненням

Я хотів би відцентрувати img всередині div без javascript та без фонових зображень .

Ось приклад коду

<div> 
    <img src="/happy_cat.png"/> 
</div>

• Я не знаю розмір img, і він повинен перевищувати ширину батьківського
• Я не знаю ширину батьківського div (це 100%)
• Батьківський div має фіксовану висоту
• Зображення більше батьківського, і батьківський переповнює: прихований
• Потрібно підтримувати лише сучасні браузери

Бажаний результат. (Ігноруйте непрозорість тощо, просто зверніть увагу на позиціонування).

Я знаю, що це легко зробити за допомогою фонових зображень, але це не для мене варіант. Я також міг би використовувати javascript, але це здається дуже важким способом досягнення цього.

Дякую!

Джек

Як що до цього:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

Це передбачає, що батьківський div розміщений відносно. Я думаю, це працює, якщо ви хочете, щоб файл .img був відносно позиціонованим, а не абсолютно. Просто видаліть position: absoluteі змініть верхній / лівий на margin-topта margin-left.

Ви , ймовірно , хочете , щоб додати підтримку браузера з transform, і -moz-transformтак далі

Старе питання, нова відповідь:

Коли зображення перевищує розмір обгортання, функція вирівнювання тексту: по центру або поля: авто не працює. Але якщо зображення менше, то рішення з абсолютним позиціонуванням або негативним лівим полем дадуть дивні ефекти.

Отже, коли розмір зображення насправді не відомий заздалегідь (як на CSM), і він може бути більшим або меншим, ніж пакувальний div, існує елегантне рішення CSS3, яке служить для всіх цілей:

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

Зверніть увагу, що залежно від інших правил у вашій таблиці стилів вам може знадобитися додати width: auto та / або max-width: none до img.

Це завжди трохи складно, і існує безліч рішень. Я вважаю, що найкращим рішенням є наступне. Це центрирує його як по вертикалі, так і по горизонталі.

CSS

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

HTML

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

Дивіться скрипка

дещо інша техніка: Скрипка

Дякуємо усім за допомогу. Я збираюся вважати це недосяжним лише в CSS.

Я перейду до рішення jQuery. Ось декілька [псевдо] кодів для зацікавлених.

Я збирався відмовитись від рішення CSS, але, схоже, це можна зробити (див. Прийняту відповідь). Ось рішення JS, з яким я збирався піти.

var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

І супровідний css

img{
  position:absolute;
  left:50%;
}

Я знаю, що це старе, але я також придумав чисте рішення css, дуже подібне до вищезазначеного.

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}

Просто ініціалізуйте положення вашого зображення наступним чином.

HTML:

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

CSS:

#img {
    left: 0;
    right: 0;
}

Або подивіться за допомогою margin: auto;

Це для горизонтального вирівнювання. Щоб вирівняти його також по вертикалі, ви можете зробити a display: table-cell;за вашим <div>тоді, vertical-align: middle;але це не є хорошою практикою, оскільки ваш <div>не є таблицею.