By default, the header logo in Modern SharePoint experience is displayed on the left side of the header and there is no option to move it to a different position. However, with a few lines of CSS and ShortPoint Theme Builder, the logo can be centered.


Before:


After:


Please follow the steps below.


Step 1: Navigate to the Custom CSS option in the Theme Builder


Open ShortPoint Theme Builder (Site Contents > ShortPoint Dashboard > ShortPoint Theme Builder). 

Then, navigate to Utilities > Custom CSS:



Step 2: Copy the custom CSS code 


Here is the custom CSS code we will be using for centering the logo. Please choose the one according to your environment, and copy it to the clipboard.

  • Office 365:

[class*=logoCell] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

  • SharePoint 2019:

[class*=ms-siteHeader-siteLogo] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Step 3: Update your customizations with the copied code


Paste the code from the Step 2 in the Custom CSS text area, and click Apply:



After you clicked Apply, the logo should now be displayed in the center of the page. 


If you are happy with the results, click Publish.


That's it. Happy centering!


Related articles: