Trying to find the perfect way to showcase a React Spinner component in the center of the screen both horizontally and vertically has been quite a challenge. After scouring through various sources, like this post, I've managed to crack the code for horizontal alignment. Here's the current snippet:
import ClipLoader from "react-spinners/BounceLoader";
function Spinner() {
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
}}
>
<ClipLoader color="#52bfd9" size={100} />
</div>
);
}
export default Spinner;
The output currently looks like this:
https://i.sstatic.net/0EJ2c.png
My quest now is how to perfectly center it vertically. The closest approach I found led me to this code snippet:
<div style={{ verticalAlign: 'middle', position:'absolute', top: '50%', left: '50%', marginTop: '-100px', marginLeft: '-250px' }}>
Despite the effort, achieving both horizontal and vertical centering seems to be a dilemma as evidenced by the following image:
https://i.sstatic.net/t9rlc.png
If you have any suggestions or solutions on how to nail down the perfect vertical and horizontal alignment for the div tag and the component, please share your insights.