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

Question

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

![<!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;
}

Answer 1

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

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

这至少会让您的主 div 居中。然后只需玩弄内部 div 和输入设置即可获得您想要的东西。

Answer 2

这应该可以解决您的问题：

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

Check the fiddle here

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

您可以将表格放在 div 中，然后在 div 上使用 css 或用于表格。相应地设置宽度，但是当设置为自动时，左边距和右边距，无论屏幕尺寸是多少，都放在屏幕的中心。

如果这不起作用，请创建一个包含所有相关 css 和 html 以及评论的 jsfiddle。

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

How can I center the below form?

html

css

center

centering