Center Align Multiple Spans In One Line

Question

I'm trying to center multiple spans in one line, nut it doesn't work for me. They always center align one beneath each other. I'd really appreciate some help. Here's the code:

 body {
            background-color: lightblue;
        }
        span {
            top: 0;
            transition: 0.1s ease-in;
            position: relative;
        }

        span:hover {
            color: orange;
            top: -10px;
        }

  <h1>
        <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
    </h1>

Answer 1

A simple text-align: center; on the h1 (i.e. their container) will be sufficient, since spans are inline elements:

body {
  background-color: lightblue;
}

span {
  top: 0;
  transition: 0.1s ease-in;
  position: relative;
}

span:hover {
  color: orange;
  top: -10px;
}

h1 {
  text-align: center;
}

<h1>
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</h1>

Or do you mean the letters/spans should be below each other and horizontally centered? For this you can use display: flex on the h1, with the following settings:

body {
  background-color: lightblue;
}

span {
  top: 0;
  transition: 0.1s ease-in;
  position: relative;
}

span:hover {
  color: orange;
  top: -10px;
}

h1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

<h1>
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</h1>

Answer 2

body {
    background-color: lightblue;
}
span {
    top: 0;
    transition: 0.1s ease-in;
    position: relative;
}

span:hover {
    color: orange;
    top: -10px;
}

.centerH1 {
  text-align: center;
}

div {
  width: 100%;
}

<div>
  <h1 class="centerH1">
   <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
  </h1>
 </div>