使用javascript和css的垂直中心出错

我正试图编写一个CSS和JavaScript来垂直地将类

viralign

中的div居中

<div id="welcome" class="width80 pad5">
    <div class="col-3 vircon">
        <div class="viralign">
            <div>
                image here
            </div>
            <div>
                text
            </div>
        </div>
    </div>
    <div class="col-3 vircon">
        <div class="viralign">
            <div>
                image here
            </div>
            <div>
                text
            </div>
        </div>
    </div>
    <div class="col-3 vircon">
        <div class="viralign">
            <div>
                image here
            </div>
            <div>
                text
            </div>
        </div>
    </div>
</div>

JavaScript代码

function virAlignNavBar(){
    var vircon = document.getElementsByClassName('vircon');
    var viralign = document.getElementsByClassName('viralign');
    for(var i=0; i < vircon.length; i++){
        var x=vircon[i].offsetHeight;
        var y=viralign[i].offsetHeight;
        viralign[i].style.top=((x/2)-(y/2)+"px");
        viralign[i].style.position="absolute";
        vircon[i].style.position="relative";
        }
}

函数virAlignNavBar（）{
var vircon=document.getElementsByClassName（'vircon'）；
var viralign=document.getElementsByClassName（'viralign'）；
对于（变量i=0；i

问题是类为

vircon

的所有div都出现在彼此的上方。 我怎样才能解决这个问题

---

我需要像这样的演员。col-3类划分三个div之间的区域，function使三个div上方的区域等于下方的区域。

删除绝对和相对位置

函数virAlignNavBar（）{
var vircon=document.getElementsByClassName（'vircon'）；
var viralign=document.getElementsByClassName（'viralign'）；
对于（变量i=0；i
.width80{
宽度：80%；
页边距：0px自动；}
.pad5{padding:5px；}
上校3{
宽度：30.33%；
右边距：10px；
浮动：左；
文本对齐：居中；
}

图像在这里
dfghjk
图像在这里
dfghjk
图像在这里
dfghjk
您必须在函数中添加
float=“right”

它不工作了。没有垂直对齐到中心，div现在不再相邻。如果不使用绝对位置，就无法设置顶部。这不是我想要的。我想将类
viralign
verticaly中的div居中。@YazanWYusuf“居中”是什么意思？类viralign中的这两个div已经居中。您正在寻找什么功能？你能说清楚点吗？请给我们一张你要找的图片。“这不明显。”DivakarDass我附上了一张照片，我希望它能让问题变得更清楚。
function virAlignNavBar(){
    var vircon = document.getElementsByClassName('vircon');
    var viralign = document.getElementsByClassName('viralign');
    for(var i=0; i < vircon.length; i++){
        var x=vircon[i].offsetHeight;
        var y=viralign[i].offsetHeight;
        viralign[i].style.top=((x/2)-(y/2)+"px");
        viralign[i].style.position="absolute";
        vircon[i].style.position="relative";
        }
}