divの要素をFlexで水平方向と垂直方向に整列する方法

Question

divを別のdivの中央に配置するにはどうすればよいですか？画像はどうですか？私はそれを縦と横の中心にしたい。私は近代的でフレックスを使いたい - 私は古いIEサポートについては気にしない。垂直CSSで中心

.outside { 
 
    background: orange; 
 
    width: 400px; 
 
    height: 300px; 
 
} 
 

 
.inside { 
 
    width: 80%; 
 
    background: yellow; 
 
}

<div class='outside'> 
 
    <div class='inside'> 
 
    This is the inside div that I would like to center in the outer one 
 
    </div> 
 
</div> 
 

 
--------------------------------------------------------------------------- 
 

 
<div class='outside'> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

Answer 1

常にそれがあるべきよりも複雑です。ここでは、Flexを使用する単純なソリューションです。 Flexはすべてのブラウザで動作しません！

水平に中央に配置するには幅が必要です。

似たような疑問がたくさんあることは知っていますが、この方法はすばやく簡単です。

.outside { 
 
    background: orange; 
 
    width: 400px; 
 
    height: 300px; 
 
    
 
    /* This is the magic*/ 
 
    display: flex; 
 
    justify-content: center; /* This centers horizontally */ 
 
    align-items: center; /* This centers vertically */ 
 
} 
 

 
.inside { 
 
    width: 80%; /* Without a width, horizontally aligning "doesn't work"*/ 
 
    background: yellow; 
 
}

<div class='outside'> 
 
    <div class='inside'> 
 
    This is the inside div that I would like to center in the outer one 
 
    </div> 
 
</div> 
 

 
--------------------------------------------------------------------------- 
 

 
<div class='outside'> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>