背景画像のあるdivを中央に配置したいと思います。幅を80％、高さを80％に設定すると、bg-imageが中央に表示されないため、このdivの応答に問題があります。私はすべてを試しましたが、画像は中央に立つことができず、ブラウザが小さいか大きい場合、これは非常に大きな問題です。
だからあなたが写真を見れば
この白いブロックをレスポンシブにしたい。
私がすでに書いたcssが少しありますが、今のところ応答しません：
top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;
CSS変換を使用できます。
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
私は2年前に同じことをしたかったのですが、解決策があります。
応答性が必要なため@media、CSS3の関数を使用できます。このような：
@media (max-width: 480px) {
#div {
top: 50%; /* IMPORTANT */
left: 50%; /* IMPORTANT */
display: block;
position: absolute;
background: url(images/background.png) no-repeat center center;
width: 750px;
height: 417px;
margin-top: -208.5px; /* HALF OF THE HEIGHT */
margin-left: -375px; /* HALF OF THE WIDTH */
}
}
使用するのmax-widthは、デバイス画面の最大幅です。それをコピーしてwidth, height, margin-left and margin-top、画像のを変更するだけです。また、backgroundタグを変更する必要があります！
画像をページの中央に配置します。
例は、 CréationsMicroWeb-Carrièresで見ることができます。ウィンドウ側を変更しても、画像は完全に中央に配置されます。
を追加overflow: hidden;してbody、解像度が低すぎる場合にページをスクロールできないようにすることができます。私がしたように。
編集：JSFiddle
自動マージンを試して、表として表示します。
.your-class {
margin-left: auto;
margin-right: auto;
display: table;
}
margin:0 auto;divの幅がコンテナdivの幅よりも小さい限り、divを水平方向に中央揃えするために使用できます。
これを試してください：
img { max-width:100%; max-height:100%; margin:auto; }
私はdisplay: inline-block;要素を中央にtext-align: center;配置し、親divを使用しました。
.container{display: flex; justify-content: center; align-items: center}