Center Logo and Site TItle on mobile

I found CSS  to place the site title next to the logo.

@media only screen and (min-width: 601px)
{
.header-title-logo::after {
    content: "Site Title";
    font-size: 45px !important;
    vertical-align:middle;
    padding-left: 30px;

}}

Result:

The mobile layout looks bad. I would like it to look something like this:

Logo Centered  on phone/screen. Title centered underneath.

Thanks for any help.

Remove your code & use this new code

/* title logo */
.header-title-logo::after {
    content: "Site Title";
    font-size: 45px !important;
    margin-left: 10px;

}
.header-title-logo {
    display: flex;
    align-items: center;
}
@media screen and (max-width:767px) {
	.header-mobile-logo a:after {
     content: "Site Title";
    font-size: 45px !important;
    margin-left: 10px;
    text-align: center;
}
}

If it doesn't work, please share link to your site, I can check it again easier