<h1>This is centred text to compare examples</h1>
<p>&#8593;<br>true center<br>&#8595</p>
<header class="header-test">
  <h2>This is centred text to compare examples</h2>
  <div class="button">
    <button>I am a button of variable width</button>
  </div>
</header>
<header class="header-test">
  <h2>This is the text that needs to be centred irrespective of what elements lie either side</h2>
  <div class="button">
    <button>Button</button>
  </div>
</header>
<header class="header-test">
  <h2>Irrespective of what elements lie either side</h2>
  <div class="button">
    <button>I am a button</button>
  </div>
</header>
<header class="header-test">
  <h2>This is the h2</h2>
  <div class="button">
    <button>I am a button</button>
  </div>
</header>
<header class="header-test">
  <h2>This is the h2</h2>
  <div class="button">
    <button>I am a button with much longer text</button>
  </div>
</header>
<header class="header-test">
  <h2>This method should work even when text wraps but is not 100% perfect but should be good enough for most purposes. This method should work even when text wraps but is not 100% perfect but should be good enough for most purposes. This method should work
    even when text wraps but is not 100% perfect but should be good enough for most purposes. This method should work even when text wraps but is not 100% perfect but should be good enough for most purposes. This method should work even when text wraps
    but is not 100% perfect but should be good enough for most purposes. This method should work even when text wraps but is not 100% perfect but should be good enough for most purposes. </h2>
  <div class="button">
    <button>Button</button>
  </div>
</header>

<h1>This is centred text to compare examples below</h1>
<header class="header-test2">
  <div class="button2">
    <button>I am a button</button>
  </div>
  <h2>This is the h2</h2>
</header>

<header class="header-test2">
  <div class="button2">
    <button>I am a button or logo etc.</button>
  </div>
  <h2>This is the h2 or any element such as navbar</h2>
</header>

<hr>
<div>
  <a href="https://codepen.io/paulobrien/pen/bGBeEPY" target="_blank">See centred in available space versions</a>
</div>
<div>
  <a href="https://codepen.io/paulobrien/pen/jOVrWaG" target="_blank">See perfectly centred version 1</a>
</div>
<hr>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
.header-test {
  background: #f9f9f9;
  max-width: 1470px;
  margin: auto;
  display: flex;
  padding: 10px;
  border-bottom: 2px solid #000;
}
.header-test .button {
  margin: 0;
  flex: 1 0 0;
  text-align: right;
}
.header-test:before {
  content: "x xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx    "; /* must be longer than right content - it doesn't matter how big you make it.*/
  flex: 1 0 0;
  text-indent: 100%; /* push to another line*/
  font-size: 16px; /* make sure text takes up horizontal space*/
  line-height: 0; /* make sure it take up no vertical space*/
  color: transparent; /*hide it*/
}
.button button {
  display: block;
  margin: 0 0 0 auto;
}
.header-test h2 {
  margin: 0;
  text-align: center;
  background: #eee;
  font-size: 1.5rem;
}
h1 {
  text-align: center;
  margin: 2rem 0 0;
  padding: 10px;
  background: #ccc;
  font-size: 1.5rem;
}
/* second example button to the left */
.header-test2 {
  background: #f9f9f9;
  max-width: 1470px;
  margin: auto;
  display: flex;
  padding: 10px;
  border-bottom: 2px solid #000;
}
.header-test2 .button2 {
  margin: 0;
  flex: 1 0 0;
  text-align:left;
}
.header-test2:after {
  content: "x xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx    "; /* must be longer than left content - it doesn't matter how big you make it.*/
  flex: 1 0 0;
  text-indent: 100%; /* push to another line*/
  font-size: 16px; /* make sure text takes up horizontal space*/
  line-height: 0; /* make sure it take up no vertical space*/
  color: transparent; /*hide it*/
}
.button2 button {
  display: block;
  margin: 0;
}
.header-test2 h2 {
  margin: 0;
  text-align: center;
  background: #eee;
  font-size: 1.5rem;
}
p{text-align:center;margin:5px 0;}