尝试将我的 div 居中，以便在我切换显示器时它们保持相同的大小

Question

你好，我是 html/css 的新手，我想知道如何将 div 居中，以便当我切换到不同的显示器时，它们将留在同一个地方。

目前的问题是，当我切换监视器时，header 移动，因此它不会与下方大 div 的边缘对齐。我希望当您将 per-portion 中的所有内容切换到新监视器

时

This is what it looks like on one monitor This is what it looks like on second monitor 我希望 header 标题与 div 框对齐，无论它显示在哪个显示器上。所以它在一台显示器上的显示方式就是它在另一台显示器上的显示方式

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>About</title>
        <link rel="stylesheet" type="text/css" href="about.css">
        <script>    </script>
    </head>
    <body>

    <div class="mainContainer">

        <div class="header">

            <div id="headerTopSection">
                <div id="titleWordsWrapper">
                    <div id="titleHeaderTailored">Tailored
                        <div id="titleHeaderSystems">Systems</div>
                    </div>
                </div>

                <div id="productsAndInformationWrapper">
                <div id="contactUs">Contact</div>
                <div id="products">Products</div>
                </div>
            </div>
        </div>
            <div id="midSection">Need this to stay the same</div>

    </div>
    </body>
    </html>

CSS

div{
    border-style:solid;
    border-width:1px;
    border-color:white;
}
html{
    height: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
body{
        background-color: #252322;
}
.mainContainer{
    margin-left:auto;
    margin-right:auto;
    width: auto;
    height: 400px;
}
.header{
    background-color: #252322;
    font-family: arial, sans-serif;
    height: 80px;
    overflow: hidden;
    padding-top: 19px;
}
#headerTopSection{
    height: 80px;
    width: auto: 0px;
}
#titleWordsWrapper{
    width: 350px;
    height: 50px;
    float: left;
}

#titleHeaderTailored{
    color: white;
    font-size: 30px;

}
#titleHeaderSystems{
    color: yellow;
    display: inline-block;
    font-size: 30px;
}
#productsAndInformationWrapper{
    width: 350px;
    height: 50px;
    float: right;
}
#products{
    float: right;
    color: white;
    font-size: 30px;
    padding-right: 20px;

}
#contactUs{
    float: right;
    color: white;
    font-size: 30px;
}
#midSection{
    height: 200px;
    width: 1000px;
    background-color: #282625;
    clear: left;
    margin-left: auto;
    margin-right: auto;
    color: white;
}

Answer 1

您在 #midSection 上使用 margin-left: auto;，因此它肯定会自动居中对齐。为了得到你想要的，修正

的值

 margin-left: 120px    <---change value accordingly

尝试将我的 div 居中，以便在我切换显示器时它们保持相同的大小

Trying to center my divs, so that when I switch monitors they stay the same size

html

css

resize

position

monitor

HTML

CSS