如何将div中的div文本居中

Question

我有这种情况：

<div id="main">
    <div id="my-items">
        <div class=m id="id1">
            Smth here(1)
        </div>

        <div class=m id="id2">
            Smth here(2)
        </div>

        <div class=m id="id3">
            Smth here(2)
        </div>
        ...
    </div>
</div>

我有不确定的div数（div的孩子（div的孩子）） 我想垂直对齐文本（在他的div中（第一个文本 - ＃id1，第二个文本 - ＃id2 ......））！我试着用vertical-align: middle;。请创建一个jsfiddle或codepen示例！

CSS：

.m{
height:32px;
width:90px;
text-align: center;
}
#my-items{
max-height:400px;
width:90px;
text-align:center;
}

I created a very simple schematic paint 3d

Answer 1

我试图尽可能地匹配图像。希望您可以根据需要获取代码并进行修改。如果这不是你想要的解决方案，我道歉。

附：我在css中添加了一条评论，向您展示了一种垂直定位内容的方法。

#my-items{
  padding: 10px;
  border: 3px solid black;
  max-height: 400px;
  width: 90px;
  text-align: center;
}

.m{
  height:32px;
  width: 100%;
  text-align: center;
  border: 3px solid black;
  
  /* This is one way of vertially aligning content */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div id="main">
  <div id="my-items">
      <div class=m id="id1">
          Smth here(1)
      </div>

      <div class=m id="id2">
          Smth here(2)
      </div>

      <div class=m id="id3">
          Smth here(2)
      </div>
  </div>
</div>

Answer 2

试试你的＃my-items风格

position: absolute;
top: 50%;