Find the string "s" within a div element aligned vertically, using Popper

Currently utilizing Popper from Material-UI

<Popper id={"simplePopper"} open={true}  style={{backgroundColor: 'red',opacity:'0.5',width:'100%',height:'100%'}}>
<div style={{height:"100%",verticalAlign: "middle", textAlign: "center"}}>
<i className="fas fa-5x fa-circle-notch fa-spin"></i><br/>
Loading
</div>
</Popper>

In my current setup, I am trying to position the fa-spin icon in the center both vertically and horizontally within the browser.

Although it is centered horizontally, the icon remains stuck to the top of the screen.

The use of 

verticalAlign: "middle"
doesn't seem to be working as intended.

Where should I focus my efforts on fixing this alignment issue?

javascriptcssreactjsmaterial-ui

Answer №1

From what I understand, there are two options available:

#simplePopper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

If for some reason you cannot utilize flexbox, an alternative approach is:

#simplePopper {
  height: 100%;
  width: 100%;
}

#simplePopper > div {
  height: 100%;
  width: 100%;
  margin: auto;
  transform: translateY(50%);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Keypress events with Dojo's 'on' module

Recently, I've started utilizing Dojo's latest on module for event handling. It has been working well so far, but a new issue has cropped up. Specifically, when using the keypress event, I am unable to retrieve the character value (such as "2" or ...

javascriptdojo

Customizing animations for birds

I'm currently in the process of developing a new website. The link to access the site is: One thing I am eager to achieve is having birds from this specific link incorporated into my background: I have attempted various methods without success. If a ...

javascripthtmlthree.jsboids

Is there a way I can detect a browser timeout and display a custom error message?

My webpage in classic asp contains a link to a local IP address, shown below: <a href="http://192.168.1.89">Link</a> When the local IP address is not available, the web browser eventually times out and shows its own error message. I ...

javascripthtmlasp-classictimeout

Is there a way to determine if the current path in React Router Dom v6 matches a specific pattern?

I have the following paths: export const ACCOUNT_PORTAL_PATHS = [ 'home/*', 'my-care/*', 'chats/*', 'profile/*', 'programs/*', 'completion/*', ] If the cur ...

javascriptreactjsreact-router-dom

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

javascripthtmlcss

Is Next.js the Ultimate Serverless Rendering Tool with Cloudflare Workers?

I am currently using Next.js version 9 and I am interested in utilizing Next's serverless deployment feature by integrating my application with Cloudflare Workers. According to the documentation for Next.js, all serverless functions created by Next f ...

javascriptnode.jsreactjsnext.jscloudflare-workers

Tips for emphasizing a searched item in V-data-table using VueJS

Is it possible to highlight a specific value in a v-data-table by searching for a particular word? Below is a snippet of my current code: EDIT: I am using the CRUD-Actions Example from the official Vuetify documentation. https://vuetifyjs.com/en/componen ...

javascriptvue.jsvuejs2vuetify.js

The background-size property in CSS does not seem to properly display on iPhones

Hello there! I'm facing an issue with my CSS code when it comes to displaying the image on Safari browser. It works perfectly fine on other browsers, but for some reason on Safari, the image doesn't show up correctly. I tried using a media query ...

htmlcsssafari

Utilizing Socket IO and Node JS to stream audio from a microphone via sockets

I am currently developing an app that requires users to use their phone's microphone to communicate with each other in the game lobby. However, I have encountered several challenges along the way. My approach involves using Node JS socket io and sock ...

javascriptnode.jsaudiosocket.iostreaming

What could be causing the data toggle feature in my navbar to not work on Bootstrap?

Here is a code snippet to create a simple collapsible navbar with Bootstrap 5 that includes a logout button. However, the data toggle feature for the logout button doesn't seem to work when clicked. Any suggestions on how to fix this? <!DOCTYPE ...

javascripthtmljquerycssbootstrap-5

The previous and next buttons are displaying side by side rather than being positioned at the outer edges

I am having an issue where the prev and next buttons are displaying next to each other instead of at the edge of the div. Can someone please assist me in fixing this problem? Below is the provided HTML code: <div id ="moreOption_80322271" class="m ...

htmlcss

Error encountered while attempting to save user to mongoose due to bcrypt issue

I am currently dedicated to expanding my knowledge in node and react through a tutorial. If you want to check out the repository, here is the link: https://bitbucket.org/grtn/cloudstruct/src/develop/ While making a post request to /api/users/register, I ...

javascriptnode.jsmongoosebcrypt

Initiating Next.js

What is the optimal location to initialize my Next JS application? I am currently doing this at the beginning of my _app.tsx component. Will these be configured before getInitialProps runs on the server? // pages/_app.js import axios from 'axios&apos ...

reactjsnext.js

What is the best way to save the values of all the input fields in a datatable, excluding any fields that are empty?

$('form').on('submit', function(e){ var form = this; // Encoding a set of form elements from all pages as an array of names and values var params = table.$('input').serializeArray(); // Iterating over all form ...

javascriptjqueryajaxlaravel-5

Can we arrange the divs in a vertical stack instead of horizontally?

Similar Inquiries: How to arrange divs from top to bottom in CSS How to order div stack first vertically then horizontally? When floating or using inline elements, they usually stack like this: ----------------- | 1 | 2 | 3 | 4 | | 5 | 6 | 7 | 8 ...

htmlcss

What is the proper way to credit the glyphicons element in Twitter's bootstrap framework?

According to the section on icons in the Base CSS page of GitHub's Twitter bootstrap, Glyphicons Halflings were not originally available for free. However, thanks to an agreement between Bootstrap and the creators of Glyphicons, developers can now use ...

javascripthtmltwitter-bootstrapglyphicons

Utilize Css3 MediaQueries to nudge @Media switch for hyperlinks

My website currently utilizes css3-mediaqueries.js for a mobile-friendly design, which is working well. However, some users are still requesting to view the "web-version" instead. Is there a way to override the current CSS on the homepage, specifically the ...

cssmedia-queries

The Filereader seems to be having trouble reading a specific file

In my Next.js application, I am attempting to allow users to upload an image from their system using an input field of type "file" and then read the content of the file using FileReader(). const OnChange = (e) => { const file = e.target.files[0]; ...

javascriptnext.js

A plethora of unhandled DOMException errors found in a basic Vue.js application

I have been working on a Vue.js project for learning purposes, incorporating Quasar and Vuex. However, I keep encountering numerous Uncaught (in promise) DOMException errors which appear in the console. The application seems to work fine, but these red err ...

javascriptvue.jspromiseservice-workerdomexception

Tips for establishing optimal parameters for an object's dynamic property

I am working with an array of objects: export const inputsArray: InputAttributes[] = [ { label: 'Name', type: 'text', name: 'name', required: true }, { label: 'User name ...

javascriptreactjstypescripttypesoptional-chaining