我如何使这个页面上的所有内容都以中心为中心，并对所有浏览器做出完全响应

Question

我的网站链接：http://foxweb.marist.edu/users/kf79g/contact.php

我的联系人页面出现问题。我希望无论屏幕大小如何（即使你将窗口调整到尽可能小的宽度），整个东西都能居中并响应。注意：不要使用大屏幕/桌面屏幕，这就是我想要的外观，除非你能找到一种方法使表单宽度更大、响应更灵敏。我试图使整个页面以中屏幕和小屏幕为中心。然而，随着页面的缩小，中心属性测量值有点偏离。这样做的原因是，有些浏览器必须有所不同，这样它才适合旧浏览器。社交偶像也给我带来了麻烦。有没有什么方法可以让整个事情以所有设备和浏览器为中心？我尽力测量了一下。任何帮助都将不胜感激。

以下是我想要解决的问题：

Firefox：在中等大小的页面上，表单超出了限制。在小页面上，当页面较小时，表单会收缩。在小页面上，社交图标被搞砸了。在中小型页面上，表单的居中不均匀。

即7:在中页面和小页面上，社交图标都很混乱。在小页面上，表单超出了范围。窗体在小屏幕上不会缩小。在中小型页面上，表单的居中不均匀。

即8:在小页面上，表单正在缩小。在中小型页面上，表单的居中不均匀。社交偶像也没那么糟糕。

HTML:

<section>
            <div id='main_section'>
                <div id = "center">
                <div id='details_section'> 
                <br/>
                    <h2> Stay in touch </h2><br/>
                    <p>I love getting feedback regarding all my projects, works, and services. You can use the quick contact form to leave a message, comments and questions.</p><br/>
                    <p>Your name and e-mail address are never shared, I just use them when I need to get back to you.</p><br/>

                    <h2> Social networks </h2><br/>
                    <div id = "center_icons">
                        <a href="https://www.facebook.com/lenny.pfautsch" target="_blank"><img src="images/facebook.png" alt="facebook" style="margin:1px;"></a> 
                        <a href="https://plus.google.com/113122168458946246215/posts" target="_blank"><img src="images/google-plus.png" alt="google plus" style="margin:1px;"></a>
                        <a href="http://www.linkedin.com/pub/leonard-pfautsch/53/b34/1a2" target="_blank"><img src="images/linkedin.png" alt="linkedin" style="margin:1px;"></a>
                        <a href="https://github.com/LeonardPfautsch" target="_blank"><img src="images/github.png" alt="github" style="margin:1px;"></a>
                    </div>
                <br/>
                </div>
                </div>
                <div id = "center">
                <div id='contact_section'>
                    <form method='POST' action='contact.php'>
                    <span class='label'>Name:</span><br/>
                    <input type='text' class='textfield' name='name' size='50' maxlength='50'><br/>
                    <span class='label'>Email:</span><br/>
                    <input type='text' class='textfield' name='email' size='50' maxlength='50'><br/>
                    <span class='label'>Subject:</span><br/>
                    <input type='text' class='textfield' name='subject' size='50' maxlength='50'><br/>
                    <span class='label'>Message:</span><br/>
                    <textarea rows='5' cols='50' name='message' id='textarea' maxlength='500'></textarea><br/>
                    <input type='submit' value='Send' id='submit' name='action'> 
                    </form>
                </div>
                </div>

            </div>
        </section>

主CSS：

#details_section {
    max-width:100%;
    float:left;
    margin-right:20px;

}

#contact_section {
    max-width:100%;
    margin-bottom:40px;
    margin-right: 0px;
    margin-top:20px;
    padding:20px; /*Make this smaller for 100% responsiveness*/
    border-radius:10px;
    background:#f1f1f1;
    box-shadow:0px 0px 15px #272727; 
    float:right;
}

#submit {
    padding:0px 8px;
    background:#c4c4c4; 
    width:115px;
    height:33px;
    border-radius:10px;
    border:1px solid #8d8d8d;
    max-width:100%;
}
#submit:hover {
    background:#a8a8a8;
    cursor: pointer;
}
div.button input {
padding:0px 8px;
    background:#c4c4c4; 
    width:80px;
    height:30px;
    border-radius:10px;
    border:1px solid #8d8d8d;
    margin:1px;
    max-width:100%;
}
div.button input:hover {
background:#a8a8a8;
    cursor: pointer;
}

大屏幕：

#details_section {
    width:320px;
}

介质屏幕：

#center{
width: 465px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#contact_section {
width:450px;
}
#details_section {
    width: 450px;
    text-align:justify;
}
#details_section h2 {
    width: 450px;
    text-align:center;
}
textarea, input[type="text"] {
    width: 100%;
    max-width: 450px;
}
textarea{
    max-width: 450px;
    height: 150px;
}

小屏幕：

#center{
width: 465px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#contact_section {
width:450px;
}
#details_section {
    width: 450px;
    text-align:justify;
}
#details_section h2 {
    width: 450px;
    text-align:center;
}
textarea, input[type="text"] {
    width: 100%;
    max-width: 450px;
}
textarea{
    max-width: 450px;
    height: 150px;
}

Answer 1

我建议使用元素检查器来在页面上获得正确的外观。所有现代浏览器都包含它们。你所需要的似乎只是一些CSS的小调整。例如，您可以在中小型布局中将输入设置为不同的宽度（第116行更改为width:90%）。

重要的是要正确理解盒子的大小以及它是如何工作的。看起来复杂的边距和填充是导致元素溢出的原因。http://css-tricks.com/box-sizing/