将div居中居中，高度设置为100％

Question

我有结构：

    .itemWrapper{
        position: relative;
        width: 100%;
        display: inline-block;
        height: 20%;
    }
    .itemNumber{
        position: relative;
        float:left;
        height: 100%;
        width: 20%;
    }
    .itemName{
        height: 100%;
        width: 20%;
        position: relative;
        float:left
    }

    <div class = "itemWrapper">
       <div class = "itemNumber">2</div>
       <div class = "itemName"> name </div<
    </div>

我需要将.itemNumber和.itemName内的文本垂直居中，该怎么办？我知道line-height的窍门，但是容器的高度以％为单位，该怎么做？

Answer 1

添加显示柔性并对齐项目：

.itemNumber, .itemName {
    display: flex;
    align-items: center;
}

Answer 2

您可以使用Flex来实现：

ostream & operator<<(ostream & os, int l)

Answer 3

添加以下CSS代码

.itemNumber, .itemName {
          display: flex;
          align-items: center;
          justify-content: center
 }