在div容器中让图片水平、垂直居中，同时让文字于图片上方居中

1.          如果希望让图片在一个<div>容器中同时垂直居中和水平居中，可以使用CSS的flexbox布局以及其他一些技巧。 具体来说，我们需要将父容器设置为弹性盒子，并使用justify-content: center;和align-items: center;属性分别实现垂直居中和水平居中对齐。
2.         要让文字在一个<div>容器中居于图片上方，可以使用CSS的flexbox布局。具体来说，我们需要将父容器设置为一个弹性盒子，并使用flex-direction: column;属性使其子元素垂直排列。

    <style>
      /*为div容器定义一个类选择器*/
      .box {
        display: flex;
        flex-direction: column; /*文字居于图片上方*/
        align-items: center; /*图片水平居中*/
        justify-content: center; /*图片垂直居中*/
      }
    </style>