Html 如何在css中水平对齐元素？

准确地说，我有一个div，我需要将内部元素水平对齐

正如您在这个Jsfiddle中看到的：我的div内部元素的位置是相对的，但是它们是垂直对齐的，只需要将其更改为水平

HTML:

---

关于显示：父项上的flex将子项放置在水平行中

.firstdiv{
位置：绝对位置；
高度：40px；
宽度：250px；
背景：白色；
显示器：flex；
}
.innerdiv{
位置：相对位置；
高度：30px；
顶部：5px；
宽度：40px；
背景：绿色；
}
.firstspan{
位置：相对位置；
}

水平对齐元素

Float或flex？span和div不能是同级：（这些是内联元素和块元素。你需要学习基本的HTML教程。CSS可以重置它们的显示属性：@WjNa如果这有助于解决你的问题，请将其标记为正确答案。你不认为div和span并排排列有点奇怪吗？这里还应该建议101个HTML tuorials:）

<div class="firstdiv">
  <div class="innerdiv"></div>
  <span class="firstspan">Align elements Horizontally <----></span>
</div>

.firstdiv{
  position:absolute;
  height:40px;
  width:250px;
  background:white;
}
.innerdiv{
  position:relative;
  height:30px;
  top:5px;
  width:40px;
  background:green;
}
.firstspan{
  position:relative;
}