Position two words next to each other css - html

Question

I've a quick question for you, I know it should be something simple... Here I have two headers (h1). Each of them contains 1 word and both must be placed next to each other, just like an ordinary phrase, the problems is that I can't center them. They both should be exactly like a title on top and on center of the document. I'm using them both because I'd like to later ' tween ' them with GSAP or something.
.title{
display: inline;
position: top center;
}
#tr{
position: left top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
#si{
position: right top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
//that's on .css side
//html
<h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>
This position: top center; line doesn't affect the text in intended way. To illustrate you it looks something like this right now:
| Winter day | | |
*Those markers I've just placed '|' aren't included in the project, it's just for you to understand what is happening.

Answer 1

The best way to do this would be to put them both inside a div, display them as inline-block and give the div the property of text-align: center
HTML
<div class='centered-images'>
<h1 class='title'>Winter</h1>
<h1 class='title'>Day</h1>
</div>
CSS
.centered-images {
text-align: center;
}
.title {
display: inline-block;
size: 18px;
color: lightgray;
}
Here's a jsfiddle to demonstrate.

Answer 2

This is my solution:
<style type="text/css">
.title{
display: inline;
position: top center;
}
#tr{
position: left top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
#si{
position: right top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
</style>
<div style="text-align:center">
<h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>
</div>