Encontré este código javascript muy útil que me ayuda a mostrar un gif de carga y un mensaje cuando se hace clic en el botón Enviar pero el contenido no se muestra en el centro de mi página web.

Traté de centrarlo en mi PC ajustando la parte superior e izquierda en el código CSS que funciona bien en la PC pero no en el móvil.

¿Cómo puedo forzar tanto el gif de carga como el mensaje en el centro de mi página web en la PC y el móvil?

Vea el código a continuación;

 <form action=''method='POST' id="submitForm" runat="server" onsubmit="ShowLoading()"> <div class='item'> <input name='Username' placeholder='Type username' required='' type='text'/> <input name='Password' placeholder='Type password' required='' id="password-field" type='password'> </div> <div class='question'> <center><p>Privacy Policy<span class='required'>*</span></p></center> <div class='question-answer checkbox-item'> <div> </div> </div> </div> <div class='btn-block'> <button href='/' type='submit' id="myButton">Proceed</button> </div> </form> 

 function ShowLoading(e) { var div = document.createElement('div'); var img = document.createElement('img'); img.src = 'loading_bar.GIF'; div.innerHTML = "Loading...<br />"; div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000'; div.appendChild(img); document.body.appendChild(div); return true; // These 2 lines cancel form submission, so only use if needed. //window.event.cancelBubble = true; //e.stopPropagation(); }