Topic: how to center modal?

yeisonvelez11 free asked 5 years ago

I dont know how to center a modal, I dont find an example to center vertically and horizontally my modal

    <div mdbModal #registro="mdbModal" class="modal fade left" id="registro" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content mascara">
        <div class="modal-header text-center">
            <!--<h4 class="modal-title w-100 font-weight-bold">Registro</h4>-->
            <i class="fa fa-user ml-1  fa-2x color_verde2_um wow rotateIn" aria-hidden="true"></i>
            <h4 class="text-center mb-3 color_verde2_um m-auto ">Registro</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="registro.hide()">
            <span aria-hidden="true">&times;</span>
        <div class="modal-body mx-3">
            <p class="card-text">
                ¡Únete al lugar donde encontrarás centralizada la información de la <strong>Universidad de Manizales</strong>!
        <div class="text-center mb-4">
            <button class="btn degradado-um btn-lg z-depth-1a waves-light" mdbWavesEffect (click)="fn_submitForm(formRegistro)">Ingresar<i class="fas fa-sign-in-alt ml-2"></i></button>

Damian Gemza staff answered 5 years ago

Dear @yeisonvelez11

Your desired modal example is described in your documentation. Please take a look at this link.

Best Regards,


Nate free commented 2 years ago

@Damian Gemza Do you know how to center a dynamically generated modal? Because the modal-dialog line is generated in that case.

Edit: Nevermind, I found it here- it's supplied as an option parameter under class. You just add modal-dialog-center to the class option.

misuk11 free commented 1 year ago

do you have an example of this ? Ive tried it but it doesnt work

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: Web
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No