align html element relative to parent, independent of other elements/siblings

Question

I have this

    <div style="float: left">
        <button class="btn btn-primary" @click="incrementLength">Increment</button>
        <button class="btn btn-primary" @click="decrementLength">Decrement</button>
    </div>
    <div style="left: 50%">
        <h1 id="tableLabel">Weather forecast</h1>
        <p>This component demonstrates fetching data from the server.</p>
    </div>

I want the second div to be in the center, horizontally, relative to its parent. I found many suggestions in internet but everything I have tried placed the < h1 > element in the center of the space which remained from placing buttons. To make things worse, the < p > element is in the center of the parent, so not centrally aligned with the < h1 >. So I would also like that the second div to be treated as a rectangular area, to have assigned a rectangular placeholder.