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

Question

要精确，我有一个div，我需要水平对齐内部元素。

正如你在Jsfiddle中看到的那样：https://jsfiddle.net/xxcm84x1/我的div内部元素的位置是相对的，但是它们是垂直对齐的，只需要将它改为水平。

HTML：

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

CSS：

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

问候

Answer 1

父母的

display: flex会将孩子放在水平行中。

.firstdiv {
  position: absolute;
  height: 40px;
  width: 250px;
  background: white;
  display: flex;
}

.innerdiv {
  position: relative;
  height: 30px;
  top: 5px;
  width: 40px;
  background: green;
}

.firstspan {
  position: relative;
}

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