在 AdminLte 内容包装器 div 中垂直居中图像答案

【问题标题】：Vertically center an image within an AdminLte content-wrapper div在 AdminLte 内容包装器 div 中垂直居中图像
【发布时间】：2021-03-05 18:27:39
【问题描述】：

我正在使用 AdminLte 模板，我将其用作布局。在我要放置内容的部分是这样的：

        <div class="content-wrapper">
            <section class="content">
                    @yield('content')
            </section>
            <!-- /.content -->
        </div>

在我有要显示的内容的视图中：

@extends('layouts.app')

@section('content')
    <div>
        <img class="mx-auto my-auto d-block" src="{{ asset('dist/img/logo.png')}}" alt="logo" style="opacity: .2">
    </div>
@endsection

执行时，徽标图像水平居中显示，但垂直显示附加到上边缘。我尝试了各种形状，但无法使其垂直居中。我不知道如何解决它。我将不胜感激。

【问题讨论】：

标签： html css laravel bootstrap-4

【解决方案1】：

在 Bootstrap 4 中，您可以使用 .d-flex .align-items-center https://getbootstrap.com/docs/4.4/utilities/flex/#align-items

结果如下：

<div class="content d-flex align-items-stretch bg-info w-100">

    <div class="d-flex bg-info w-100">
        <div class="d-flex align-items-center w-100">
            <img class="w-100" src="https://via.placeholder.com/800x200">
        </div>
    </div>
</div>

这里是完整的演示 https://jsfiddle.net/herupurwito/8oq67jcr/3/

【讨论】：

非常感谢您，先生，您的贡献解决了这个问题。祝你有美好的一天。