如何在所有其他div和所有其他div上显示一个div应该居中？

问题描述

我正在设计一个html page.link 。

我需要将按钮和进度条全部对齐到中心并显示在文字云后面。

请指出我正确的方向，这里有什么不对，为什么栏不显示在词云下面。如何在顶部显示wordcloud以及在其下方的所有其他内容div居中？



我尝试过：

I am designing a html page.link https://codepen.io/KARANVERMA5/pen/oqKJma .
I need to have the button and progress bar all aligned to center and shows behind the word-cloud.
Please point me in right direction that what is wrong here, why the bar is not showing below the word-cloud. How can I show wordcloud at top and all other things divs below it centered?

What I have tried:

    #word-cloud  {
    position:fixed;
    height: 100vh;
    max-height: 100%;
    width: 100vw;
    max-width: 100;
    margin:-300px auto auto -250px;
    top:20%;
    left:70%;
    text-align:center;
    z-index:1;
}

body,
html {
    margin: 0;
    padding: 0;
}


.bar {
    position:relative;
    border: 1px solid #666;
    height: 5px;
    width: 100px;
    margin:-300px auto auto -250px;
    z-index: 2;
}

.bar .in {
    -webkit-animation: fill 10s linear 1;
    animation: fill 10s linear 1;
    height: 100%;
    background-color: red;
}

@-webkit-keyframes fill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

推荐答案

这篇关于如何在所有其他div和所有其他div上显示一个div应该居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！