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:

TABLE OF CONTENTS

• Solution
  • Step 1. Navigate to the Custom CSS option in the Theme Builder
  • Step 2. Copy the custom CSS code
  • Step 3. Update your customizations with the copied code

Solution

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 and click Customize my site).

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%);
}

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

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:

• How to Link Your Logo to a Page
• How to Increase the Logo Size in Modern Pages (Office 365)