Vertically center an image within an AdminLte content-wrapper div

I am using an AdminLte template, which I use as a layout. In the part where I am going to put the content it is like this:

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

In the view where I have the content to display I have:

@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

When executing, the image of the logo appears centered horizontally, but vertically it appears attached to the upper margin. I've tried various shapes, but can't get it to center vertically. I can't figure out how to fix it. I will appreciate a help.

enter image description here



Read more here: https://stackoverflow.com/questions/64961657/vertically-center-an-image-within-an-adminlte-content-wrapper-div

Content Attribution

This content was originally published by Junco Fuerte at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: