[Video] How to center the center div in Oxygen’s Header

Wondering how to make sure that the logo image placed in Oxygen Header Builder’s center div always remain centered irrespective of how much content is placed in the left and right divs?

Before:

After:

Watch the screencast below to learn how.

Here’s the CSS code:

.oxy-header-container {
	justify-content: center;
}

.oxy-header-center {
	flex-grow: 0;
}

.oxy-header-left,
.oxy-header-right {
	flex: 1;
}

@media only screen and (max-width: 992px) {

	.oxy-header-container {
		flex-direction: column;
	}

	.oxy-header-left,
	.oxy-header-right {
		justify-content: center;
	}

}

An alternate approach is to use CSS Grid like so:

.oxy-header-container {
	display: grid;
	grid-template-columns: 1fr 150px 1fr;
}

where 150px is the width of your image logo. Credit: Olly Cowan.