divを別のdivの中に集中させる最良の方法

divを中心に（縦と横に）divを整列させるのが最も好奇妙です。この例では、背景の画像とdivの内側に、垂直方向に&を中心にしたい赤いdivが表示されています。divを別のdivの中に集中させる最良の方法

モバイルウィンドウで&のブラウザウィンドウのサイズを変更すると自動的に適応するように、これを行う最善の方法は何ですか？

次のメソッドが失敗した：

位置：相対。 &トップ：50％; - divの最上部だけが集中していますが、残りの部分は集中していません。負の余白を追加すると、親要素に適用されるので失敗します。
マージン：25％auto;
vertical-align：middle;

justify-content：center;任意の助け

body{ 
 
    background: yellow; 
 
    margin: 0 auto; 
 
} 
 

 
#first{ 
 
    width:100%; 
 
    height:550px; 
 
    background: url('https://static.pexels.com/photos/30627/pexels-photo-30627.jpg'); 
 
    background-size: cover; 
 
} 
 

 
#central{ 
 
    width:200px; 
 
    height:100px; 
 
    background: red; 
 
    margin: 0 auto; 
 
    
 
    /* 
 
    
 
    Why DO THESE FAIL: 
 
    
 
    position:relative; & top: 50%; 
 
    
 
    margin: 25% auto; 
 
    
 
    vertical-align: middle; 
 
    
 
    justify-content: center; - presumably only applies to flexboxes 
 
    
 
    */ 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="css.css"> 
 
    <title>title</title> 
 
    </head> 
 
    <body> 
 
     
 
     <div id="first"> 
 
     <div id="central"></div> 
 
     </div> 
 
    
 
    </body> 
 
</html>

ありがとう： - おそらく唯一ここ

をflexboxesに適用されるコードです。

出典

2017-07-09 user3760941

https://stackoverflow.com/a/33049198/3597276 –

'ポジションを追加します。relative'は#firstと'トップを追加します：50％; 左：50％; トランスフォーム：translate（-50％、-50％）; 位置：絶対; to #central [FiddleHere]（https://jsfiddle.net/L9uxv0vk/） – stacky

私はそれを行う最善の方法は、フレックスボックスを使用していると思います。この驚くべきことを確認してくださいpost about flexbox。親のdivのCSSはそのようかなっなければならない

：

.first { 
    display: flex; 
    align-items: center; 
}

出典

2017-07-09 17:07:20

divを別のdivの中に集中させる最良の方法

答えて

関連する問題