html - 子要素よりも狭い親内の子要素を水平方向に中央揃えにする

Question

画像自体ほど広くない幅の広い<img>要素を水平方向に中央に配置しようとしています。<div>そして、その上<div>にoverflow: hidden設定されています。

たとえば、画像が500px広く、DIV が250px広いなどです。中央部分のみがdiv内に表示されるように画像を中央に配置するためのクリーンな方法(任意の寸法の画像で機能するような方法)はありますか?

Answer 1

<div class="Container">
    <img class="Thumb">
</div>

と ：

.Container {
    position: /* anything but static */
    width: 250px;
}

.Thumb {
    position: relative;
    width: 500px;
    margin: 0 auto;
}

Answer 2

レスポンシブな動作を期待しているので、（単純なものの場合）持つことをお勧めします

div {
 text-align: center;
}

ただし、CSS3 とメディア クエリを使用すると可能です。

これを確認してくださいCSS3でレスポンシブな中央画像を作成する方法

クイックデモ