在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上面的代码将文本在图像上垂直和水平居中：