在flexbox中的图像上居中文本

Question

在flexbox中的图像上居中文本如何将文本居中对齐<img>优选使用FlexBox？body {   margin: 0px;}.height-100vh {   height: 100vh;}.center-aligned {   display: box;   display: flex;   box-align: center;   align-items: center;   box-pack: center;   justify-content: center;}.background-image {   position: relative;}.text {   position: absolute;}<section class="height-100vh center-aligned">   <img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg" />   <div class="text">SOME TEXT</div></section>

Answer 1

要将文本居中于图像上，您不需要flexbox。只需使用CSS定位属性。

.height-100vh {
    height: 100vh;
    position: relative;               /* establish nearest positioned ancestor for
                                         absolute positioning */}.text {
    position: absolute;  
    left: 50%;                        /* horizontal alignment */
    top: 50%;                         /* vertical alignment */
    transform: translate(-50%, -50%); /* precise centering; see link below */}

修改了Codepen

上面的代码将文本在图像上垂直和水平居中：