how to center a web part in the center of sreen/web part zone

Question

This has been asked before, yet I can't seem to get it to work. As depicted in this image, my Search Box won't center align in the Web Part or page. I tried several things... This is the latest:

#SearchBox { width: 650px; 
 margin: 0 auto; margin-top: 0px; border-spacing:10px 10px;
}

Answer 1

Try the below CSS style in Script Editor Web Part

<style>
   #SearchBox {
        position: absolute;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
      }
</style>

Or

<style>
#SearchBox {
margin-left: 50% !important;
</style>

Note: In the second style, you will need to Increase or decrease percent manually based on your requirements.

Output