javascript - Div 不在另一个 div 中居中

Question

我有一个非常简单的问题。我有嵌套的 div。我试图在 div(.main) 中将 div(.gridcontainer) 居中。如果你运行下面的代码片段，你可以看到 div 在主 div 中确实居中。它在水平和垂直方向的两侧留下不均匀的空间。

我已经尝试了很多修复，甚至尝试通过 JS 动态地将它们集中在负载上。但是，不知何故，它没有达到结果。

我只希望它的大小与父对象的大小相同，但每边均匀地留​​有小空间。

body {
    margin: 0;
    padding: 0;
}

.tops {
    position: fixed;
    background: rgba(0,0,0,0.70);
    margin: 0px;
    padding: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 100vh;
    min-width: 100vw;
    height: auto;
    width: auto;
    overflow: hidden;
}

.top_menu {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    background-color: green;
    overflow: hidden;
}

.welcome {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    min-height: 100vh;
    min-width: 50%;
    height: auto;
    width: auto;
}

.welcome_message {
    font-family: 'Palanquin Dark', sans-serif;
    font-size: calc(2.5vw + 3vh);
    position: relative;
    top: 30%;
    left: 50%;
    margin: 0;
    float: left;
    color: white;
    display: inline-block;
    overflow: hidden;
    transform: translate(-50%, -30%);
}

.app_name {
    font-size: calc(1.5vw + 2vh);;
}

.gradientText {
    background: -webkit-linear-gradient(#FFA07A, #8B0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.downloadButton{
    position: absolute;
    top: 75%;
    left:50%;
    background-color: white;
    width: 225px;
    height: 50px;
    border-radius: 25px;
    border-width: 0px;
    display: inline-block;
    overflow: hidden;
    transform: translate(-50%, -75%);
    transition: all .2s ease-in-out;

}

.downloadButton:hover
{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: translate(-50%, -75%) scale(1.1);
}


.downloadText {
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: bold;
    color: black;
}


.iphone {
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    min-height: 100vh;
    min-width: 50%;
    height: auto;
    width: auto;
}

.iXFrame {
    position: absolute;
    height: 700px;
    width: 350px;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -45%);
}

.main {
    position: absolute;
    display: block;
    margin-top: 75px;
    height: auto;
    overflow: hidden;
    width: auto;
    min-width: 100vw;
    min-height: 50vh;

}

.gridcont{
    position : absolute;
    /*height: auto;*/
    width: auto;
    /*min-height: 95vh;*/
    min-width: 95vw;
    margin: 0;
    border-radius: 20px;
    display: inline-block;
    background-color: whitesmoke;
    /*overflow: hidden;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Montserrat|Palanquin+Dark|Paytone+One|Rubik|Rubik+Mono+One" rel="stylesheet">
    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">

    <section class="mains ui">
        <div
            class="tops"></div>
            <!--.top_menu-->
            <div class="ui grid marg-reset">
                <div class="doubling two column row">
                    <div class="ui column welcome">
                        <h1 class="welcome_message"><span class="app_name">Example</span><br>we will<br>rock <br>you<br><span class="gradientText">Text</span></h1>
                        <a class="downloadButton" type="button" href="/app">
                            <div class="downloadText">Download Spotmi</div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="ui grid gridcont">
                    <div class="doubling two column row">
                        <div class="ui column show_text">
                            <h1 class="emotion_message">Hello world</h1>
                        </div>
                        <div class="ui column emotion_show"></div>
                    </div>
                </div>
            </div>
    </section>

这也对网站的响应特性提出了一个问题。下面是两个截图。其中一个是 HiDPI 笔记本电脑屏幕，另一个是 iphone X 模拟器。这甚至在那里构成了一个问题。

iPhoneX 尺寸屏幕。

笔记本电脑屏幕。

我该如何解决这个问题？

Answer 1

你有没有试过给你想要居中的内部div CSS属性:

position: relative;
top: 50%;
left 50%;
transform: translate(-50%, -50%);

这通常可以解决我的平衡问题 xD