Hidden modal not centered after fade in

Question

Hi I am doing an admin panel on my own but I ran into a issue, so I have this modal wich is hidden at first but shows up after I click the edit button on y rows BUT fo some reason once the modal shows it's not centered, it should be centered since the container of the modal is using flexbox with justify-content and align-items properties set to center, instead it shows at the beggining of the div's flow. I tried using margin:auto on the modal but even that doesn't work.

Here is my code:

 $(".edit_button").click(function(){ $('.edit_modal_overlay_maincontainer').fadeIn(1000); }); $(".edit_modal_header_close").click(function(e){ e.preventDefault(); $('.edit_modal_overlay_maincontainer').fadeOut(1000); }); 

 body{display:flex; flex-direction:column; position:relative; font-family:Open Sans;} *{box-sizing:border-box; margin:0; padding:0;} a{text-decoration:none;} table, th, td {border: 1px solid rgba(0,0,0,0.2); border-collapse: collapse;} th, td {padding: 4px 8px;} th { text-align: left;} .pointer{cursor:pointer;} .navbar_maincontainer{width:100%; height:8vh; background-color:#605CA8; display:flex; align-items:center;} .navbar_logo_container{width:280px; height:100%; position:relative; display:flex; align-items:center; padding:0px 15px; border-right:1px solid rgba(0,0,0,0.);} .navbar_gradient{width:100%; height:100%; position:absolute; right:0px; top:0px; background: linear-gradient(to left, rgba(52, 50, 89, 0.7), rgba(52, 50, 89, 0));} .navbar_logo_part1{z-index:9999999999; font-family:Rubik; font-size:24px; color:#00ffa1;} .navbar_logo_part2{font-size:23px; color:rgba(255,255,255,0.85);} .navbar_menu_toggle{font-size:26px; color:rgba(255,255,255,1.0); margin-left:15px;} .navbar_menu_toggle:hover{color:#2A3F54;} .navbar_logout_container{width:auto; height:35px; display:flex; align-items:center; margin-left:auto; margin-right:30px; font-family:Open Sans;} .navbar_logout_icon{font-size:26px; color:rgba(255,255,255,1.0); margin-left:auto; margin-right:5px;} .navbar_logout_text{font-size:17px; color:rgba(255,255,255,1.0);} .navbar_logout_container:hover .navbar_logout_icon{color:#2A3F54;} .navbar_logout_container:hover .navbar_logout_text{color:#2A3F54;} .admin_maincontainer{width:100%; height:92vh; display:flex;} .sidebar_maincontainer{overflow-x:hidden; width:280px; height:100%; transition:all 100ms ease; display:flex; flex-direction:column; background-color:#2A3F54; box-shadow:4px 4px 4px rgba(0,0,0,0.3); align-items:center;} .active_sidebar_maincontainer{width:0px;} .sidebar_user_container{width:100%; height:90px; display:flex; padding:10px; margin:5px 0px;} .sidebar_user_image{width:60px; height:60px; border-radius:50%; background-color:#01B271; display:flex;} .sidebar_user_image_letter{margin:auto; font-size:25px; color:rgba(255,255,255,0.9); font-weight:600;} .sidebar_user_info_container{width:auto; height:100%; display:flex; flex-direction:column; padding:5px 5px 5px 10px;} .sidebar_user_info_name{font-size:19px; color:rgba(255,255,255,1.0); font-weight:500;} .sidebar_user_info_role_container{width:100%; display:flex; height:25px; align-items:center;} .sidebar_user_info_status{width:7px; height:7px; border-radius:50%; background-color:#3C763D; margin-right:5px;} .sidebar_user_info_role{font-size:10px; color:rgba(255,255,255,0.8); font-weight:300;} .sidebar_user_info_last_conection{font-size:10px; color:rgba(255,255,255,0.8); font-weight:300; margin-top:7px;} .sidebar_search_container{width:90%; height:45px; display:flex; align-items:center; border-radius:11px; background-color:#3A4851; margin-top:20px; margin-bottom:15px; overflow:hidden;} .sidebar_search_input{width:85%; height:100%; padding:10px; background-color:#3A4851; border:1px solid #3A4851; color:rgba(255,255,255,0.9); font-size:17px;} .sidebar_search_input:focus {border-color: none;-webkit-box-shadow: none; box-shadow: none; outline: none;} .sidebar_search_button{width:15%; height:100%; background-color:#3A4851; display:flex;} .fa-search{font-size:20px; color:rgba(255,255,255,0.9); margin:auto;} .sidebar_entries_container{width:100%; height:auto; overflow-x:hidden; overflow-y:auto; border-top:1px solid rgba(42,63,84,0.5);} .sidebar_entry_container{width:100%; height:auto; display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,0.1);} .sidebar_entry_container:hover{cursor:pointer;} .sidebar_entry_link_container{width:100%; height:50px; display:flex; align-items:center; padding:10px; position:relative;} .sidebar_entry_link_container:hover{} .sidebar_entry_link_icon_container{width:30px; height:100%; display:flex; justify-content:center; align-items:center; margin-right:5px;} .active_entry{background-color:#1c2a38;} .sidebar_entry_link_icon{font-size:19px; color:rgba(255,255,255,0.9);} .sidebar_entry_link_item{font-size:18px; color:rgba(255,255,255,0.9); font-weight:500;} .sidebar_entry_dropdown_container{width:100%; height:auto; display:flex; flex-direction:column; display:none;} .sidebar_entry_dropdown_item{width:100%; height:35px; display:flex; transition:all 400ms ease; align-items:center; padding:0px 20px; font-size:14px; color:rgba(255,255,2555,0.9);} .sidebar_entry_dropdown_item:hover{background-color:#3A4851} .fa-chevron-right{color:rgba(255,255,255,0.9); font-size:8px; margin-right:10px; transition:all 400ms ease;} .fa-chevron-down{font-size:14px; color:rgba(255,255,255,0.9); position:absolute; top:50%; transform:translateY(-50%); right:11px;} .body_maincontainer{width:80%; height:100%; background-color:rgba(0,0,0,0.1); padding:50px;} .active_body_maincontainer{width:100%; } .body_entry_container{width:100%; height:35px; display:flex; align-items:center; margin-bottom:15px;} .body_entry_title{font-size:27px; color:rgba(0,0,0,0.8);; font-weight:600; margin-right:10px;} .body_entry_new_container{border-radius:7px; display:flex; align-items:center; background-color:#337AB7; padding:4px 8px;} .body_entry_new_plus{color:white; font-size:12px; margin-right:5px;} .body_entry_new_text{font-size:16px; color:white; font-weight:500;} .body_table_maincontiner{width:100%; font-size:12px; background-color:white;} .body_table_options_container{display:flex;} .body_table_option_edit_container{width:25px; height:25px; border-radius:5px; display:flex; background-color:#5BC0DE; margin-right:10px;} .body_table_option_delete_container{width:25px; height:25px; border-radius:5px; display:flex; background-color:#D9534F;} .body_table_option_icon{color:white; font-size:15px; margin:auto;} .edit_modal_overlay_maincontainer{width:100%; height:100vh; background-color:rgba(0,0,0,0.7); position:absolute; top:0px; left:0px; display:flex; justify-content:center; align-items:center; z-index:999999999999999999999999999;} .edit_modal_container{ width:55%; height:82%; border:1px solid rgba(0,0,0,0.2); background-color:white; border-radius:20px; display:flex; flex-direction:column;} .edit_modal_header_container{width:100%; height:13%; display:flex; align-items:center; position:relative; padding:0px 20px;} .edit_modal_header_close{position:absolute; top:50%; transform:translateY(-50%); right:25px;} .fa-times-circle{color:rgba(0,0,0,0.2); font-size:30px;} .edit_modal_header_title{font-size:25px; color:rgba(0,0,0,0.8); font-weight:600;} .edit_modal_header_line{width:94%; height:1px; position:absolute; left:50%; transform:translateX(-50%); bottom:0px; border-bottom:1px solid rgba(0,0,0,0.2);} .edit_modal_body_container{font-family:Open Sans; width:100%; height:74%; overflow:auto; padding:10px 20px 10px 20px; display:flex; flex-direction:column;} .edit_modal_body_options_container{width:100%; height:30px; display:flex; align-items:center; margin:10px 0px;} .edit_modal_body_options_select_title{font-size:14px; color:rgba(0,0,0,0.9); font-weight:900; margin-right:10px;} .edit_modal_body_options_select{width:20%; height:30px; border-radius:5px; border:1px solid rgba(0,0,0,0.2);} .edit_modal_body_options_select_options{color:rgb(0,0,0,0.8);} .edit_modal_options_image_upload{display:flex; align-items:center; width:auto; height:35px; border: 2px solid rgba(0,0,0,0.9); margin-left:auto; border-radius: 5px; padding: 5px 7px; background-color: rgba(0,0,0,0.1); color:rgba(0,0,0,0.9); font-weight:900; font-size:14px;} label.edit_modal_options_image_upload input[type="file"] {position:absolute; top: -1000px;} .fa-picture-o{color:rgba(0,0,0,0.9); font-size:20px; margin-right:5px;} .edit_modal_input{font-family:Open Sans; margin:10px 0px; font-size:13px; width:50%; height:30px; border-radius:5px; padding:7px 7px; box-shadow:none; border:1px solid rgba(0,0,0,0.2);} .edit_modal_input_textarea{font-family:Open Sans; margin:10px 0px; width:100%; height:300px; border-radius:5px; padding:7px; box-shadow:none; border:1px solid rgba(0,0,0,0.2);} .edit_modal_footer_container{width:100%; height:13%; position:relative; display:flex; align-items:center; padding:20px;} .edit_modal_footer_line{width:94%; height:1px; position:absolute; left:50%; transform:translateX(-50%); top:0px; border-bottom:1px solid rgba(0,0,0,0.2);} .edit_modal_reset_add_button{margin:0px 5px; margin-left:auto; font-size:15px; padding:0px 10px; height:30px; background-color:#67C4DD; border-radius:5px; color:white; display:flex; justify-content:center; align-items:center;} .edit_modal_footer_reset_button{margin:0px 5px; font-size:15px; padding:0px 10px; height:30px; background-color:#D9534F; border-radius:5px; color:white; display:flex; justify-content:center; align-items:center;} .hide{display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="edit_modal_overlay_maincontainer hide"> <form class="edit_modal_container"> <div class="edit_modal_header_container"> <a class="edit_modal_header_close" href=""><i class="fa fa-times-circle"></i></a> <h2 class="edit_modal_header_title">Nuevo post</h2> <div class="edit_modal_header_line"></div> </div> <div class="edit_modal_body_container"> <div class="edit_modal_body_options_container" style=""> <span class="edit_modal_body_options_select_title" style=" ">Categorias</span> <select class="edit_modal_body_options_select" style=""> <option class="edit_modal_body_options_select_options" value="Noticias">Noticias</option> <option class="edit_modal_body_options_select_options" value="saab">Clases</option> <option class="edit_modal_body_options_select_options" value="mercedes">Evento</option> <option class="edit_modal_body_options_select_options" value="audi">Blog</option> </select> <label class="edit_modal_options_image_upload pointer"> <input type="file" required/> <i class="fa fa-picture-o"></i> <span>Imagen</span> </label> </div> <input class="edit_modal_input" style="" type="text" placeholder="Titulo del post"> <input class="edit_modal_input" style="" type="text" placeholder="Resumen del post"> <input class="edit_modal_input" style="" type="text" placeholder="Descripción de la imagen"> <textarea class="edit_modal_input_textarea" style="" type="textarea" placeholder="Contenido del post"></textarea> </div> <div class="edit_modal_footer_container" style=""> <div class="edit_modal_footer_line" style=""></div> <a class="edit_modal_reset_add_button" href="" title="" style="">Añadir</a> <a class="edit_modal_footer_reset_button" href="" title="" style="">Reset</a> </div> </form> </div> <div class="navbar_maincontainer"> <div class="navbar_logo_container"> <h1 class="navbar_logo_part1">Gab<span class="navbar_logo_part2">admin</span></h1> <div class="navbar_gradient"></div> </div> <i class="navbar_menu_toggle fa fa-bars pointer"></i> <a class=" navbar_logout_container pointer" href="{{ route('logout') }}" title="Salir del administrador"> <i class="fa fa-sign-out navbar_logout_icon"></i> <span class="navbar_logout_text">Salir</span> </a> </div> <div class="admin_maincontainer"> <div class="sidebar_maincontainer"> <div class="sidebar_user_container"> <div class="sidebar_user_image"> <span class="sidebar_user_image_letter">G</span> </div> <div class="sidebar_user_info_container"> <span class="sidebar_user_info_name">¡Hola Gabriel!</span> <span class="sidebar_user_info_last_conection">Ult. conexión: 04/05/2018</span> <div class="sidebar_user_info_role_container"> <div class="sidebar_user_info_status"></div> <span class="sidebar_user_info_role">Super Admin</span> </div> </div> </div> <div class="sidebar_search_container"> <input class="sidebar_search_input" type="text" placeholder="Buscar..."> <a class="sidebar_search_button" href=""><i class="fa fa-search"></i></a> </div> <div class="sidebar_entries_container"> <div class="sidebar_entry_container"> <div class="sidebar_entry_link_container"> <div class="sidebar_entry_link_icon_container"> <i class="fa fa-user sidebar_entry_link_icon"></i> </div> <span class="sidebar_entry_link_item">Usuarios</span> </div> <!--<div class="sidebar_entry_dropdown_container"> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Clientes</div> </div>--> </div> <div class="sidebar_entry_container"> <div class="sidebar_entry_link_container"> <div class="sidebar_entry_link_icon_container"> <i class="fa fa-newspaper-o sidebar_entry_link_icon"></i> </div> <span class="sidebar_entry_link_item">Posts</span> </div> <!--<div class="sidebar_entry_dropdown_container"> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> </div>--> </div> <div class="sidebar_entry_container"> <div class="sidebar_entry_link_container"> <div class="sidebar_entry_link_icon_container"> <i class="fa fa-tag sidebar_entry_link_icon"></i> </div> <span class="sidebar_entry_link_item">Tags</span> </div> <!--<div class="sidebar_entry_dropdown_container"> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> </div>--> </div> </div> </div> <div class="body_maincontainer"> <div class="body_entry_container"> <span class="body_entry_title">Post</span> <a class="body_entry_new_container pointer" title="Crear nuevo"> <i class="fa fa-plus body_entry_new_plus"></i> <span class="body_entry_new_text">Nuevo</span> </a> </div> <table class="body_table_maincontiner"> <tr> <th width="10%">Firstname</th> <th width="10%">Lastname</th> <th width="10%">Age</th> <th width="1%">Acción</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer delete_button" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container" style=""> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <span class="body_table_option_edit_container pointer"> <i class="fa fa-pencil body_table_option_icon"></i> </span> <span class="body_table_option_delete_container pointer"> <i class="fa fa-trash-o body_table_option_icon"></i> </span> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container" style=""> <span class="body_table_option_edit_container pointer" style=""> <i class="fa fa-pencil body_table_option_icon" style=""></i> </span> <span class="body_table_option_delete_container pointer" style=""> <i class="fa fa-trash-o body_table_option_icon" style=""></i> </span> </td> </tr> </table> </div> </div> 

Answer 1

because fadeIn add display: block css to your element. try below code.

 $(".edit_button").click(function(){ $('.edit_modal_overlay_maincontainer').css({opacity: 0, display: 'flex'}).animate({ opacity: 1 }, 300); }); $(".edit_modal_header_close").click(function(e){ e.preventDefault(); $('.edit_modal_overlay_maincontainer').css('display','none'); }); 

 body{display:flex; flex-direction:column; position:relative; font-family:Open Sans;} *{box-sizing:border-box; margin:0; padding:0;} a{text-decoration:none;} table, th, td {border: 1px solid rgba(0,0,0,0.2); border-collapse: collapse;} th, td {padding: 4px 8px;} th { text-align: left;} .pointer{cursor:pointer;} .navbar_maincontainer{width:100%; height:8vh; background-color:#605CA8; display:flex; align-items:center;} .navbar_logo_container{width:280px; height:100%; position:relative; display:flex; align-items:center; padding:0px 15px; border-right:1px solid rgba(0,0,0,0.);} .navbar_gradient{width:100%; height:100%; position:absolute; right:0px; top:0px; background: linear-gradient(to left, rgba(52, 50, 89, 0.7), rgba(52, 50, 89, 0));} .navbar_logo_part1{z-index:9999999999; font-family:Rubik; font-size:24px; color:#00ffa1;} .navbar_logo_part2{font-size:23px; color:rgba(255,255,255,0.85);} .navbar_menu_toggle{font-size:26px; color:rgba(255,255,255,1.0); margin-left:15px;} .navbar_menu_toggle:hover{color:#2A3F54;} .navbar_logout_container{width:auto; height:35px; display:flex; align-items:center; margin-left:auto; margin-right:30px; font-family:Open Sans;} .navbar_logout_icon{font-size:26px; color:rgba(255,255,255,1.0); margin-left:auto; margin-right:5px;} .navbar_logout_text{font-size:17px; color:rgba(255,255,255,1.0);} .navbar_logout_container:hover .navbar_logout_icon{color:#2A3F54;} .navbar_logout_container:hover .navbar_logout_text{color:#2A3F54;} .admin_maincontainer{width:100%; height:92vh; display:flex;} .sidebar_maincontainer{overflow-x:hidden; width:280px; height:100%; transition:all 100ms ease; display:flex; flex-direction:column; background-color:#2A3F54; box-shadow:4px 4px 4px rgba(0,0,0,0.3); align-items:center;} .active_sidebar_maincontainer{width:0px;} .sidebar_user_container{width:100%; height:90px; display:flex; padding:10px; margin:5px 0px;} .sidebar_user_image{width:60px; height:60px; border-radius:50%; background-color:#01B271; display:flex;} .sidebar_user_image_letter{margin:auto; font-size:25px; color:rgba(255,255,255,0.9); font-weight:600;} .sidebar_user_info_container{width:auto; height:100%; display:flex; flex-direction:column; padding:5px 5px 5px 10px;} .sidebar_user_info_name{font-size:19px; color:rgba(255,255,255,1.0); font-weight:500;} .sidebar_user_info_role_container{width:100%; display:flex; height:25px; align-items:center;} .sidebar_user_info_status{width:7px; height:7px; border-radius:50%; background-color:#3C763D; margin-right:5px;} .sidebar_user_info_role{font-size:10px; color:rgba(255,255,255,0.8); font-weight:300;} .sidebar_user_info_last_conection{font-size:10px; color:rgba(255,255,255,0.8); font-weight:300; margin-top:7px;} .sidebar_search_container{width:90%; height:45px; display:flex; align-items:center; border-radius:11px; background-color:#3A4851; margin-top:20px; margin-bottom:15px; overflow:hidden;} .sidebar_search_input{width:85%; height:100%; padding:10px; background-color:#3A4851; border:1px solid #3A4851; color:rgba(255,255,255,0.9); font-size:17px;} .sidebar_search_input:focus {border-color: none;-webkit-box-shadow: none; box-shadow: none; outline: none;} .sidebar_search_button{width:15%; height:100%; background-color:#3A4851; display:flex;} .fa-search{font-size:20px; color:rgba(255,255,255,0.9); margin:auto;} .sidebar_entries_container{width:100%; height:auto; overflow-x:hidden; overflow-y:auto; border-top:1px solid rgba(42,63,84,0.5);} .sidebar_entry_container{width:100%; height:auto; display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,0.1);} .sidebar_entry_container:hover{cursor:pointer;} .sidebar_entry_link_container{width:100%; height:50px; display:flex; align-items:center; padding:10px; position:relative;} .sidebar_entry_link_container:hover{} .sidebar_entry_link_icon_container{width:30px; height:100%; display:flex; justify-content:center; align-items:center; margin-right:5px;} .active_entry{background-color:#1c2a38;} .sidebar_entry_link_icon{font-size:19px; color:rgba(255,255,255,0.9);} .sidebar_entry_link_item{font-size:18px; color:rgba(255,255,255,0.9); font-weight:500;} .sidebar_entry_dropdown_container{width:100%; height:auto; display:flex; flex-direction:column; display:none;} .sidebar_entry_dropdown_item{width:100%; height:35px; display:flex; transition:all 400ms ease; align-items:center; padding:0px 20px; font-size:14px; color:rgba(255,255,2555,0.9);} .sidebar_entry_dropdown_item:hover{background-color:#3A4851} .fa-chevron-right{color:rgba(255,255,255,0.9); font-size:8px; margin-right:10px; transition:all 400ms ease;} .fa-chevron-down{font-size:14px; color:rgba(255,255,255,0.9); position:absolute; top:50%; transform:translateY(-50%); right:11px;} .body_maincontainer{width:80%; height:100%; background-color:rgba(0,0,0,0.1); padding:50px;} .active_body_maincontainer{width:100%; } .body_entry_container{width:100%; height:35px; display:flex; align-items:center; margin-bottom:15px;} .body_entry_title{font-size:27px; color:rgba(0,0,0,0.8);; font-weight:600; margin-right:10px;} .body_entry_new_container{border-radius:7px; display:flex; align-items:center; background-color:#337AB7; padding:4px 8px;} .body_entry_new_plus{color:white; font-size:12px; margin-right:5px;} .body_entry_new_text{font-size:16px; color:white; font-weight:500;} .body_table_maincontiner{width:100%; font-size:12px; background-color:white;} .body_table_options_container{display:flex;} .body_table_option_edit_container{width:25px; height:25px; border-radius:5px; display:flex; background-color:#5BC0DE; margin-right:10px;} .body_table_option_delete_container{width:25px; height:25px; border-radius:5px; display:flex; background-color:#D9534F;} .body_table_option_icon{color:white; font-size:15px; margin:auto;} .edit_modal_overlay_maincontainer{width:100%; height:100vh; background-color:rgba(0,0,0,0.7); position:absolute; top:0px; left:0px; display:flex; justify-content:center; align-items:center; z-index:999999999999999999999999999; transition: all 0.5s ease-in-out} .edit_modal_container{ width:55%; height:82%; border:1px solid rgba(0,0,0,0.2); background-color:white; border-radius:20px; display:flex; flex-direction:column;} .edit_modal_header_container{width:100%; height:13%; display:flex; align-items:center; position:relative; padding:0px 20px;} .edit_modal_header_close{position:absolute; top:50%; transform:translateY(-50%); right:25px;} .fa-times-circle{color:rgba(0,0,0,0.2); font-size:30px;} .edit_modal_header_title{font-size:25px; color:rgba(0,0,0,0.8); font-weight:600;} .edit_modal_header_line{width:94%; height:1px; position:absolute; left:50%; transform:translateX(-50%); bottom:0px; border-bottom:1px solid rgba(0,0,0,0.2);} .edit_modal_body_container{font-family:Open Sans; width:100%; height:74%; overflow:auto; padding:10px 20px 10px 20px; display:flex; flex-direction:column;} .edit_modal_body_options_container{width:100%; height:30px; display:flex; align-items:center; margin:10px 0px;} .edit_modal_body_options_select_title{font-size:14px; color:rgba(0,0,0,0.9); font-weight:900; margin-right:10px;} .edit_modal_body_options_select{width:20%; height:30px; border-radius:5px; border:1px solid rgba(0,0,0,0.2);} .edit_modal_body_options_select_options{color:rgb(0,0,0,0.8);} .edit_modal_options_image_upload{display:flex; align-items:center; width:auto; height:35px; border: 2px solid rgba(0,0,0,0.9); margin-left:auto; border-radius: 5px; padding: 5px 7px; background-color: rgba(0,0,0,0.1); color:rgba(0,0,0,0.9); font-weight:900; font-size:14px;} label.edit_modal_options_image_upload input[type="file"] {position:absolute; top: -1000px;} .fa-picture-o{color:rgba(0,0,0,0.9); font-size:20px; margin-right:5px;} .edit_modal_input{font-family:Open Sans; margin:10px 0px; font-size:13px; width:50%; height:30px; border-radius:5px; padding:7px 7px; box-shadow:none; border:1px solid rgba(0,0,0,0.2);} .edit_modal_input_textarea{font-family:Open Sans; margin:10px 0px; width:100%; height:300px; border-radius:5px; padding:7px; box-shadow:none; border:1px solid rgba(0,0,0,0.2);} .edit_modal_footer_container{width:100%; height:13%; position:relative; display:flex; align-items:center; padding:20px;} .edit_modal_footer_line{width:94%; height:1px; position:absolute; left:50%; transform:translateX(-50%); top:0px; border-bottom:1px solid rgba(0,0,0,0.2);} .edit_modal_reset_add_button{margin:0px 5px; margin-left:auto; font-size:15px; padding:0px 10px; height:30px; background-color:#67C4DD; border-radius:5px; color:white; display:flex; justify-content:center; align-items:center;} .edit_modal_footer_reset_button{margin:0px 5px; font-size:15px; padding:0px 10px; height:30px; background-color:#D9534F; border-radius:5px; color:white; display:flex; justify-content:center; align-items:center;} .hide{display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="edit_modal_overlay_maincontainer hide"> <form class="edit_modal_container"> <div class="edit_modal_header_container"> <a class="edit_modal_header_close" href=""><i class="fa fa-times-circle"></i></a> <h2 class="edit_modal_header_title">Nuevo post</h2> <div class="edit_modal_header_line"></div> </div> <div class="edit_modal_body_container"> <div class="edit_modal_body_options_container" style=""> <span class="edit_modal_body_options_select_title" style=" ">Categorias</span> <select class="edit_modal_body_options_select" style=""> <option class="edit_modal_body_options_select_options" value="Noticias">Noticias</option> <option class="edit_modal_body_options_select_options" value="saab">Clases</option> <option class="edit_modal_body_options_select_options" value="mercedes">Evento</option> <option class="edit_modal_body_options_select_options" value="audi">Blog</option> </select> <label class="edit_modal_options_image_upload pointer"> <input type="file" required/> <i class="fa fa-picture-o"></i> <span>Imagen</span> </label> </div> <input class="edit_modal_input" style="" type="text" placeholder="Titulo del post"> <input class="edit_modal_input" style="" type="text" placeholder="Resumen del post"> <input class="edit_modal_input" style="" type="text" placeholder="Descripción de la imagen"> <textarea class="edit_modal_input_textarea" style="" type="textarea" placeholder="Contenido del post"></textarea> </div> <div class="edit_modal_footer_container" style=""> <div class="edit_modal_footer_line" style=""></div> <a class="edit_modal_reset_add_button" href="" title="" style="">Añadir</a> <a class="edit_modal_footer_reset_button" href="" title="" style="">Reset</a> </div> </form> </div> <div class="navbar_maincontainer"> <div class="navbar_logo_container"> <h1 class="navbar_logo_part1">Gab<span class="navbar_logo_part2">admin</span></h1> <div class="navbar_gradient"></div> </div> <i class="navbar_menu_toggle fa fa-bars pointer"></i> <a class=" navbar_logout_container pointer" href="{{ route('logout') }}" title="Salir del administrador"> <i class="fa fa-sign-out navbar_logout_icon"></i> <span class="navbar_logout_text">Salir</span> </a> </div> <div class="admin_maincontainer"> <div class="sidebar_maincontainer"> <div class="sidebar_user_container"> <div class="sidebar_user_image"> <span class="sidebar_user_image_letter">G</span> </div> <div class="sidebar_user_info_container"> <span class="sidebar_user_info_name">¡Hola Gabriel!</span> <span class="sidebar_user_info_last_conection">Ult. conexión: 04/05/2018</span> <div class="sidebar_user_info_role_container"> <div class="sidebar_user_info_status"></div> <span class="sidebar_user_info_role">Super Admin</span> </div> </div> </div> <div class="sidebar_search_container"> <input class="sidebar_search_input" type="text" placeholder="Buscar..."> <a class="sidebar_search_button" href=""><i class="fa fa-search"></i></a> </div> <div class="sidebar_entries_container"> <div class="sidebar_entry_container"> <div class="sidebar_entry_link_container"> <div class="sidebar_entry_link_icon_container"> <i class="fa fa-user sidebar_entry_link_icon"></i> </div> <span class="sidebar_entry_link_item">Usuarios</span> </div> <!--<div class="sidebar_entry_dropdown_container"> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Clientes</div> </div>--> </div> <div class="sidebar_entry_container"> <div class="sidebar_entry_link_container"> <div class="sidebar_entry_link_icon_container"> <i class="fa fa-newspaper-o sidebar_entry_link_icon"></i> </div> <span class="sidebar_entry_link_item">Posts</span> </div> <!--<div class="sidebar_entry_dropdown_container"> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> </div>--> </div> <div class="sidebar_entry_container"> <div class="sidebar_entry_link_container"> <div class="sidebar_entry_link_icon_container"> <i class="fa fa-tag sidebar_entry_link_icon"></i> </div> <span class="sidebar_entry_link_item">Tags</span> </div> <!--<div class="sidebar_entry_dropdown_container"> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div> </div>--> </div> </div> </div> <div class="body_maincontainer"> <div class="body_entry_container"> <span class="body_entry_title">Post</span> <a class="body_entry_new_container pointer" title="Crear nuevo"> <i class="fa fa-plus body_entry_new_plus"></i> <span class="body_entry_new_text">Nuevo</span> </a> </div> <table class="body_table_maincontiner"> <tr> <th width="10%">Firstname</th> <th width="10%">Lastname</th> <th width="10%">Age</th> <th width="1%">Acción</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer delete_button" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container" style=""> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <a class="body_table_option_edit_container pointer edit_button" title="Editar"> <i class="fa fa-pencil body_table_option_icon"></i> </a> <a class="body_table_option_delete_container pointer" title="Borrar"> <i class="fa fa-trash-o body_table_option_icon"></i> </a> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container"> <span class="body_table_option_edit_container pointer"> <i class="fa fa-pencil body_table_option_icon"></i> </span> <span class="body_table_option_delete_container pointer"> <i class="fa fa-trash-o body_table_option_icon"></i> </span> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td class="body_table_options_container" style=""> <span class="body_table_option_edit_container pointer" style=""> <i class="fa fa-pencil body_table_option_icon" style=""></i> </span> <span class="body_table_option_delete_container pointer" style=""> <i class="fa fa-trash-o body_table_option_icon" style=""></i> </span> </td> </tr> </table> </div> </div> 

Answer 2

So I fixed it by using absolute positioning on my modal, like this:

top:50%; left:50%; transform:translate(-50%, -50%)