Html 垂直将div居中放置在div内

我已经尝试了我能找到的所有方法。。对我来说什么都不管用。。。 我只想知道对齐一个div或另一个div中的块元素有什么问题。。有什么能这么难的

我想垂直对齐绿色块

这是小提琴：

请。。有人能帮忙吗。。解释一下我到底错了什么

编辑： 让我更清楚一点。。。 我需要一行中的所有元素。 只需在文本的垂直中间对齐块

编辑2：这是一张图片

---

必须将所有div显示为内联块

.centerwrapper分区{ 显示：内联块； } 新答案

这是新的小提琴链接

CSS

对于内部div，我添加了显示为内联表，这样它们就不会被视为块元素并显示在一行中。对于外部div，我添加了文本对齐作为中心。这样它会在中心显示内容

你的小提琴只做了两次改动

对于内部div而不是float:right，我添加了display:inline表 对于外部div，添加了文本对齐：居中。 可以吗

.centerwrapper div:last-child{
    margin-top:-8px;
 }

给你的绿块一个适当的顶边，让它们坐在包装纸的中间。

在这个演示中，我给包装器div一个红色背景，以更好地显示HTML代码 平均的

和CSS

.green-block {
            background-color: #02A556;
            margin: 0 .25em 0 .25em !important;
            width: 1em;
            height: 0.5em;
            margin:10px!important;
            list-style:none;
        }
        .pull-right {
            float: right;
        }
        .rtl {
            direction:rtl;
        }
        .centerwrapper {
            position: absolute;
            top: 50%;
            left: 0px;
            width: 100%;
            overflow: visible;
        }
        .clear{
            clear:both;
        }

使用此选项。并给出所需的边距大小

您可以使用display:flex执行以下操作：

或显示：表格包括IE8

---

我不知道你是否想保持绿色方块的高度，但如果你添加一个填充：5px；对于绿色区块来说，至少它看起来更漂亮，虽然这不是一个好的解决方案更改了用于确定空白空间的空白，这不是一个问题，我想@Farewytoh哇，我想把这个评论贴到问题本身，很抱歉。但是现在所有的东西都堆起来了。。我想把它排成一行。。查看更新后的问题和图片…编辑我的答案，是否可以@Vermanus我认为最好在问题中添加一张图片，以获得所需的输出。我不知道您是否希望保持绿色块的高度，但如果添加填充：5px；对绿色街区来说，至少它看起来更漂亮，尽管这不是一个好地方solution@Mortalus检查编辑后的答案，答案中附有屏幕截图。这是不可接受的，因为我正在寻找所有块元素居中的通用解决方案。如果您遵循显示：表格/内联表格，则不需要绝对定位，也可在主体上使用。

.pull-right {
    display: inline-table;
}

.centerwrapper {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    overflow: visible;
    text-align: center;
}

.centerwrapper div:last-child{
    margin-top:-8px;
 }

.green-block {
            background-color: #02A556;
            margin: 0 .25em 0 .25em !important;
            width: 1em;
            height: 0.5em;
            margin:10px!important;
            list-style:none;
        }
        .pull-right {
            float: right;
        }
        .rtl {
            direction:rtl;
        }
        .centerwrapper {
            position: absolute;
            top: 50%;
            left: 0px;
            width: 100%;
            overflow: visible;
        }
        .clear{
            clear:both;
        }

html,body {
  height:100%;
  width:100%;
  margin:0;
}
body , body > div{
  display:flex;
}
div {

  margin:auto;
}
.green-block {
    background-color: #02A556;
    margin: 0 .25em 0 .25em !important;
    width: 1em;
    height: 0.5em;
order:4;
}
.first {
  flex:1;
    order:1;
}

body, html {

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display:table;
}
body {
    display:table-cell;
    vertical-align:middle;
}
div {
    display:table;
    direction:rtl;
    margin:auto;
    border-spacing:0.25em;
}
.green-block {
    background-color: #02A556;
    width: 1em;
    height: 0.5em;
    display:table-cell;
}

 .green-block {
   background-color: #02A556;
   margin: 6px 10px!important;
   width: 1em;
   height: 0.5em;
 }