我怎样才能使下面的表格居中？答案

【问题标题】：How can I center the below form?我怎样才能使下面的表格居中？
【发布时间】：2015-06-16 13:29:21
【问题描述】：

我怎样才能使下面的表格居中。现在它离右边太远了。我希望它在页面上居中（稍微向左移动）。我尝试了很多不同的解决方案，但是我知道我在这里遗漏了一些非常小的东西。谢谢你。

![<!DOCTYPE HTML>
<head>
<title>Page | Contact</title>
<meta charset="utf-8">
<!-- Google Fonts -->
<link rel='stylesheet' type='text/css' href='css/font.css'/>
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/simple_menu.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/contact.css">

<!-- Contact Form -->
<link href="contact-form/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="contact-form/css/uniform.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script src="js/contact.js"></script>
<?php include 'common_header.php'; ?>

</head>
<body>
<?php
    include 'header.php';
?>
<div id="container">
  <div class="one-third"> &nbsp; </div>
  <div class="one-third">
    <div class="heading_bg">
      <h2>Contact Us</h2>
    </div>
    <form action="#" id="contact_form" class="TTWForm" method="post">
      <div id="field1-container" class="field f_100">
        <label class="required" for="name">Name</label>
        <input name="name" id="name" type="text">
        <span id="name_validation" class="error_message"></span>
      </div>
      <div id="field2-container" class="field f_100">
        <label class="required" for="subject">Subject</label>
        <input name="subject" id="subject" type="text">
        <span id="subject_validation" class="error_message"></span>
      </div>
      <div id="field5-container" class="field f_100">
        <label class="required" for="email">Email</label>
        <input name="email" id="email" type="email">
        <span id="email_validation" class="error_message"></span>
      </div>
      <div id="field4-container" class="field f_100">
        <label class="required" for="message">Message</label>
        <textarea rows="5" cols="20" id="message" name="message"></textarea>
        <span id="message_validation" class="error_message"></span>
      </div>
      <div id="form-submit" class="field f_100 clearfix submit">
        <input value="Submit" type="submit" id="submit_button">
      </div>
    </form>
  </div>
  <div class="one-third last">
  </div>
  <div style="clear:both; height: 0px"></div>
</div>
<!-- close container -->
<?php
    include('footer.php');
?>
</body>
</html>][2]

CSS

#after_submit, #email_validation, #name_validation {
    display:none;
}

#after_submit{
    background-color: #c0ffc0;
    line-height: 31px;
    margin-bottom: 10px;
    padding-left: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#after_submit{
    color: #6c6c6c;
}

.error {
  background-color:#FFDFDF;
  color:red;
}
.error_message{
  font-style: italic;
  font-size: 10px;
}
.row {
  margin:5px;
}

【问题讨论】：

将相关的 CSS 发布到表单中。
你为什么要使用<div class="one-third">，将1个div包含在form中，并使其成为marginLeft:auto和marginRight:auto。这样div 就进入了中心
如果您的班级.one-third 创建的列是.container 父块宽度的三分之一，那么您的表单宽度是否足够小以适合分配的空间？
@dowomenfart 很抱歉没有发布 CSS。我以为我做到了。谢谢
您确定这是对表单进行的唯一样式设置吗？好像你缺少一些 CSS。

标签： html css center centering

【解决方案1】：

这应该对你有用：

#contact_form{
    width:50%;
    margin-left:auto;
    margin-right:auto;
}

Check the fiddle here

我没有添加你所有的 CSS，只是展示了如何使表单居中。在您的代码中使用上面的 CSS，您可以将其居中。

您可以将表单放在一个 div 中并在 div 上使用 css 或用于表单。相应地设置宽度，但设置为自动时的左右边距，无论屏幕大小如何，都将其置于屏幕中心。

如果这不起作用，则使用所有相关的 css 和 html 和评论创建一个 jsfiddle。

【讨论】：

谢谢！那工作得很好。我相应地调整了宽度等。

【解决方案2】：

这应该可以解决问题。可能需要调整宽度和边距，但只要它们加起来达到 100%，就可以了。

#contact_form, .heading_bg {
    display: block;
    position: relative
    width: 50%;
    margin: 0 25%;
    padding: 0;
}

这至少会使您的主 div 居中。然后，只需使用内部 div 和输入设置即可获得所需的内容。

【讨论】：