居中一个div；不知道该怎么办

Question

几个小时以来，我一直在尝试在我正在创建的网站上将 table div 居中，但我无法弄清楚。我试过使用 margin: 0 auto 定义的宽度，但这不起作用。我也有 'margin-right: auto; margin-left: auto;", 但这也不起作用。我真的不确定还能尝试什么。

此外，我正在尝试修复我的页脚以使其位于页面底部。它在一个页面上看起来很棒，排在所有内容之后，但在另一页上它会位于内容之上。我应该为此创建另一个主题，还是有人可以帮助我解决这个问题？

HTML 用于包含 table 的页面：

#body {
 background-color: #8AD4E6;
 font-color: #3E3E3E;
 font-family: "Akzidenz Grotesk" sans-serif; 
}

#content {
 margin-left: auto;
 margin-right: auto;
 width: 500px;
 text-align: center;
 vertical-align: middle;
 position: relative;
}

#header {
 background-color: #6cf;
 margin:           10px;
 height:           120px;
 font-family: "Akzidenz Grotesk" sans-serif; 
 text-align: center;
 color: #4D8B4D;
 border: 2px solid black;
 }
 

 #headerimg {
 border: 2px solid;
 float: left;
 margin: 10px 5px 5px 5px;
 margin-left: 20px;
 }
 
 #sidebar{
 position: relative;
 float: right;
   margin: 10px;
   padding: 25px;
   background-color: #6cf;
   border: 2px solid black;
 }
 
 .sideheading {
 text-align: center;
 color: #4D8B4D;
 font-family: "Akzidenz Grotesk" sans-serif; 
 }

 
table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 text-align: center;
 padding: 5px;
 margin-left: 35%;
 position: relative;
 text-align: center;
 vertical-align: middle;
 }
 table th {
 font-style: bold;
 }
.female {
 background-color: #FFE6FF;
 }
.male {
 background-color: #D6EBFF;
 }
.uni{
 background-color: #D4FFD4;
}
#name{
 margin-left: 35%;
 text-align: center;
 vertical-align: middle;
 position: relative;
}

#navigation {
 list-style-type: none;
 margin: 0;
 padding: 0;
 display: inline;
 width: 20px;
 background-color: #6EC66E;
 margin-left: 44%;
 margin-top: 30px;
 text-align: center;
}

#navigation li {
 display: inline-block;
}

a:link, a:visited {
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #CC6699;
    text-align: center;
    padding: 4px;
    text-decoration: none;
}

a:hover, a:active {
    background-color: #4D8B4D;
}
#footer {
   position: relative;
   margin: 5px;
   padding: 5px;
   height: 60px;
   background-color: #6cf;
   border: 2px solid black;
}

`<!DOCTYPE html>
<html>
  <head>
    <title>Writer's Toolbox</title>
    <link rel="stylesheet" type="text/css" href="writerstoolbox.css" />
  </head> 

  <body>
    <div id="headerimg">
      <img src="logo.jpg" alt="Writer's Toolbox header image" />
  </div> 

 <div id="header"> <h1> Writer's Toolbox</h1><h3>All of your writing needs in one place </h3></div>
 
 <div id="sidebar">
      <h3 class="sideheading">
        <!-- <img src="" alt="" /> -->
        <br />
        What are you looking for?
      </h3>
   <p><a href="names.html">Names</a><br>Settings<br>Character Traits<br>Mary Sue Test<br>Plot ideas<br>Title ideas<br>Writing Tips<br>Resources</p>
  </div>
  
 <div id="content">
 <h3 id="name">'A' Names</h3><br>
  <table id="tablename">
   <tr>
    <th>Names</th>
    <th>Alternate Spelling</th>
    <th>Gender </th>
    <th>Origin</th>
    <th>Meaning</th>
   </tr>
   <tr class="male">
    <td>Aaron</td>
    <td>Arron, Aaren</td>
    <td>m</td>
    <td>Hebrew</td>
    <td>Exalted, strong</td>
   </tr>
   <tr class="male">
    <td>Abbott</td>
    <td>Abbot</td>
    <td>m</td>
    <td>English</td>
    <td>Head of a monastery</td>
  </table>
  </div>
  
 <footer id="footer"> 
  <ul id="navigation">
   <li><a href="writerstoolbox.html">Homepage</a></li>
   <li> | </li>
   <li><a href="names.html">Back to Names</a></li>
  </ul>
 </footer>`

Answer 1

你在地球样式方面遇到了一些问题，比如你为 table 设计了样式并将其组合在一起无论如何这是js中的解决方案fiddle http://jsfiddle.net/phonexdoda/ze6dddoh/

我将#content 样式更改为

#content {
    width: 1020px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

添加$table名称样式

#tablename{
   margin: auto; 
}

最后 table 造型

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    padding: 5px;
    position: relative;
    text-align: center;
    vertical-align: middle;
}

和#name

#name {
    text-align: center;
    vertical-align: middle;
    position: relative;
}

页脚需要这个

#footer {
    position: relative;
    clear: both;
    margin: 5px;
    padding: 5px;
    height: 60px;
    background-color: #6cf;
    border: 2px solid black;
}

Answer 2

如果您在 content class 中使用 text-align: center; 和 vertical-align: middle;，它将尝试将 div 的内容格式化为这些属性。这些不适用于实际的 div 本身。

围绕 content div 创建一个新的 div，例如 content_container 并将 text-align: center; 和 vertical-align: middle; 应用到 class.

这将使您的 content div.

居中并垂直对齐

居中一个div；不知道该怎么办

Centering a div; not sure what to do

html

css

footer