css样式--将大小不固定的图片或文字段 垂直居中

本文将介绍的是将大小不固定的图片或文字段 垂直居中的两种简单的方法
方式一：
将父元素的display设为display:table-cell;再加上水平居中和垂直居中的两个代码： text-align: center;vertical-align:middle;就轻松搞定了图片的垂直居中如果是文字的话，需要将子元素设置为display:inline-block;

HTML代码如下：

<div class="imgBox">
<img src="images/prize2.png">
</div>
<div class="imgBox">
<img src="images/icon8.png">
</div>

css代码：

.imgBox{display:table-cell;width: 500px;height: 500px;margin:0 auto;text-align: center;border: 1px solid #000;vertical-align:middle;}
.imgBox p{width:100%;display:inline-block; font-size:16px;}

方式二：
将父元素的display设为display：flex;变成flexbox布局，加上它特带的使元素水平居中的justify-content: center;和垂直居中的align-items: center;

html代码：

<div class="imgBox">
    <p>你好，这是第一行文字</p>
    <p>你好，这是第二行文字</p>
</div>

<div class="imgBox1">
<img src="images/prize2.png"/>
</div>
<div class="imgBox1">
    <p>你好，这是第一行文字你好，这是第二行文字你好，这是第二行文字</p>
</div>

css代码：

.imgBox1{width: 300px;height: 300px;display: flex;justify-content: center;align-items: center;border:1px solid #ccc;}

效果图展示：