bootstrap 如何讓div內部垂直居中？

&
&
&
圖片
& & &
&
文字內容
& & &

在網上找了很多垂直居中的辦法，測試了都不行

Bootstrap的柵格系統使用的是float：left的浮動方式，vertical-align屬性不起作用，見官網：

Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

故把內部div的float屬性清除，添加display屬性，如下：

.middle {
float: none;
display: inline-block;
vertical-align: middle;
}


使用定位居中，子元素添加下面的樣式

.center-vertical{

position: relative;

top: 50%;

transform: translateY(-50%);

}

外麵包一層flex布局