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 Laptop屏幕之一是iphone X模拟器。这甚至在这里构成一个问题。

iPhoneX尺寸屏幕。

笔记本电脑屏幕。

我该如何解决呢？

Answer 1

您是否尝试过将CSS属性居中的值指定给内部div

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

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