Html 中央多个分区和一个IMG

我正在创建一个站点，现在如果我想在一行中居中多个div，它会以1920 x 1080的分辨率居中，但不会以更小的分辨率居中。。。请帮忙。。。这是我的密码：

    <style>
            p       {color:white; font-size: 150%; font-family: verdana; margin-top: 7.5%; }
            body {margin:0 auto; padding:0; }
            a {text-decoration: none}
            div {  background-color:blue; position:absolute;padding:0; margin:0; text-align: center; }
            img {position:absolute;padding:0; margin:0;}
            div:hover {background-color: f900fe}

            #logo { float:right; margin:0 auto; padding:0; position:absolute;left:25.9%; margin-left:-95px; width:200px; height:56px; margin-top:0%; min-height:56px; max-height:56px ; min-width: 56px; max-width: 56px}

            #home { float:right;margin:0 auto; padding:0;position:absolute;left:25.9%; margin-left:-39px; width:200px; height:6%; margin-top:0%;  min-height:56px; max-height: 56px; min-width:10.42%;}

            #video { float:right;margin:0 auto; padding:0; position:absolute;left:25.9%; margin-left:158px; width:200px; height:6%; margin-top:0%; min-height:56px; max-height: 56px; min-width:10.42%;}

            #contact {  float:right;margin:0 auto; padding:0;position:absolute;left:25.8% ; margin-left:358px; width:200px; height:6%; margin-top:0%;  min-height:56px; max-height: 56px; min-width:10.42%}




    </style>

p{颜色：白色；字体大小：150%；字体系列：verdana；页边距顶部：7.5%；}
正文{margin:0自动；padding:0；}
a{文本装饰：无}
div{背景色：蓝色；位置：绝对；填充：0；边距：0；文本对齐：中心；}
img{位置：绝对；填充：0；边距：0；}
div:hover{背景色：f900fe}
#徽标{浮动：右侧；边距：0自动；填充：0；位置：绝对；左侧：25.9%；边距左侧：-95px；宽度：200px；高度：56px；边距顶部：0%；最小高度：56px；最大高度：56px；最小宽度：56px；最大宽度：56px}
#主页{浮动：右侧；边距：0自动；填充：0；位置：绝对；左侧：25.9%；边距左侧：-39px；宽度：200px；高度：6%；边距顶部：0%；最小高度：56px；最大高度：56px；最小宽度：10.42%；}
#视频{浮动：右侧；边距：0自动；填充：0；位置：绝对；左侧：25.9%；边距左侧：158px；宽度：200px；高度：6%；边距顶部：0%；最小高度：56px；最大高度：56px；最小宽度：10.42%；}
#触点{浮动：右侧；边距：0自动；填充：0；位置：绝对；左侧：25.8%；边距左侧：358px；宽度：200px；高度：6%；边距顶部：0%；最小高度：56px；最大高度：56px；最小宽度：10.42%}

---

我已经尝试过用auto来代替margin，但这不起作用…

我建议使用诸如or之类的框架。这使您能够快速、轻松地使用网格系统，并且您可以指定您希望的起始宽度大小等。例如，在zurb中，它看起来像

<div class="row">
    <div class="large-4 columns">
        <a href='index.php'>
            <div id='home' title='Ga naar de homepage'>
                <p> <strong> Home </P>
            </div>
        </a>
    </div>
    <div class="large-4 columns">
            <a href='Contact/index.php'>
                <div id='contact' title='Neem contact met ons op'>
                    <p> <strong> Contact </p>
                </div>
            </a>
    </div>
    <div class="large-4 columns">
        <div id='Video' title="Bekijk onze video's!">
            <a href='video/index.php'>
                <p> <strong> Video's </p></div>
            </a>
            <a href='index.php'>   
                <img title='Ga naar de homepage' id='logo' src='img/logo.jpg' />
            </a>
        </div>
    </div>
</div>

如果我创建了一个容器，则尝试使用flexbox Doenst，所有div都将移动，而不是容器。在css中，您可以将它们居中。您将所有div打包到一个新div中，该div将以所有div为中心，您为该div命名并将以下内容应用于其id/类显示：flex；对齐项目：居中；证明内容：中心；

<div class="row">
    <div class="large-4 columns">
        <a href='index.php'>
            <div id='home' title='Ga naar de homepage'>
                <p> <strong> Home </P>
            </div>
        </a>
    </div>
    <div class="large-4 columns">
            <a href='Contact/index.php'>
                <div id='contact' title='Neem contact met ons op'>
                    <p> <strong> Contact </p>
                </div>
            </a>
    </div>
    <div class="large-4 columns">
        <div id='Video' title="Bekijk onze video's!">
            <a href='video/index.php'>
                <p> <strong> Video's </p></div>
            </a>
            <a href='index.php'>   
                <img title='Ga naar de homepage' id='logo' src='img/logo.jpg' />
            </a>
        </div>
    </div>
</div>