How do I align Box shadow to the Center of the screen?

Please whats the best way to make a box shadow appear in the center of the screen? Sought thru and I have not found anything that can be of some form of assistance in that Light. My css I have written looks like the given below:

  .paypalPayment{
    width: 700px;
    height: 52px;
    margin:59px;
    position:absolute;
    border:2px solid #fff;
    background: url(pp2.png) no-repeat;
    box-shadow: 10px 10px 5px #ccc;
    -moz-box-shadow: 10px 10px 5px #ccc;
    -webkit-box-shadow: 10px 10px 5px #ccc;
    -khtml-box-shadow: 10px 10px 5px #ccc;
  }

And this has been put inside the div which should display the Boxshadow in the HTML area. I just want it to be centered. How do I go about something like this?

Edits

The Box-Shadow rather than comes to the center of the Screen, goes to the Left start of the page. Now that is the css class that is supposed to align the css, I tried using align-items: center; turns it never worked out.

My code for the Html looks thus :

import React from 'react';
import './app-styles.css';
import Vector from './Vector.png'
import ie_logo from './ie_logo.png';
import {Link} from 'react-router-dom';


function HomePage() {
  return (
    <div className="App">
        <header className="header">
        <img src={Vector} style={{margin:7, flexDirection:'column', alignItems: 'center'}} alt="Vector" />
        <img src={ie_logo} style={{margin:7, flexDirection: 'row', width:114, height:25}} alt="ie_logo" />
        <p className="needhelpText">NEED HELP?</p>
        </header>
            <form>
                <div className="InstructionText">
                    payment
                </div>

                <div className="paypalPayment" >
                </div>
            </form>
        <footer className="footer">
        <a href="#" className="footerLinks"> Privacy Policy | &nbsp; </a>
        <a href="#" className="footerLinks">Do Not Sell My Personal Information | &nbsp; </a>
        <a href="#" className="footerLinks">Advertising Guidelines | &nbsp;</a>   
        <a href="#" className="footerLinks">Site Map  &nbsp;</a>  

        <div className="copyrightText">
        © Copyright 2021 | Luther Corp | All Rights Reserved
        </div>
        <div className="footerLogo"> 
        <img src={ie_logo}  alt="ie_logo" />
        </div>
        </footer>
    </div>
  );
}

export default HomePage;

This is my CSS

.header{
    background-color: #007FC0;
    width: 100%;
    padding: 25px 0;
}

.container{
    flex : 1 1 auto;
    color:white;
}

.needhelpText{
    text-align: right;
    font-weight: bold;
    color: white;
    margin-left: 22px;
    display: inline-block;
    padding: 10px;
    float: right;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: medium;
}

.copyrightText{
    color: white;
    font-size: 14px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.footerLinks{
    color: white;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.footerLogo{
    float: right;
    display:flex;   
    margin-right: 17px;
    margin-left: 22px;
    text-align: center;
    width: 114px;
    height : 30px;
}

.footer{
    position: fixed;
    left: 0;
    padding: 10px;
    bottom: 0;
    width: 100%;
    height: 70px;
    background-color: #16192C;
}

.InstructionText {
    margin-bottom: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    justify-content: center;
    color: #007FC0;
    text-transform: uppercase;
    font-style: italic;
    font-weight:bolder;
    display: flex;
  }
  
  .InstructionText:after {
    content: "";
    border-bottom: 4px solid #FF9900;
    width: 100px;
    margin-bottom: 7px;
    width: 549px; 
  }

  .paypalPayment{
    width: 700px;
    height: 52px;
    margin:59px;
    align-items: center;
    position:absolute;
    border:2px solid #fff;
    background: url(pp2.png) no-repeat;
    box-shadow: 10px 10px 5px #ccc;
    -moz-box-shadow: 10px 10px 5px #ccc;
    -webkit-box-shadow: 10px 10px 5px #ccc;
    -khtml-box-shadow: 10px 10px 5px #ccc;
  }

The CSS responsible for doing that is with the class paypalPayment

So please How do i go about pushing the boxshadow to the center?

Edits 2

Sofar I think I have gotten it to center. Now it chunks against each other. And looks like this now

How do I in turn space it? I am kind of new to CSS