將兩個div對齊，然后將兩個div水平和垂直居中

Question

我試着環顧四周，但我無法弄清楚任何有效的東西。

正如標題所說，我需要將兩個div對齊並排在一起。

<div id="wrapper">

<div id="dashboard" style="width: 70%;">

    <h3 id="dash" style="color:#99FF00; font-family:monospace;">

        <table style="color:#99FF00; font-family:monospace;" cellpadding="7">
            <tr>
                <td>generation</td>
                <td>1</td>
            </tr>
            <tr>
                <td>currently living</td>
                <td><p id="initial_current"></p></td>
            </tr>
            <tr>
                <td>recently newborn</td>
                <td>0</td>
            </tr>
            <tr>
                <td>recently died</td>
                <td>0</td>
            </tr>
            <tr>
                <td>recently surviving</td>
                <td>n/a</td>
            </tr>
        </table>


        <table style="color:#99FF00; font-family:monospace;" cellpadding="7">
            <tr>
                <td>total living</td>
                <td><p id="initial_total"></p></td>
            </tr>
            <tr>
                <td>total newborns</td>
                <td>0</td>
            </tr>
            <tr>
                <td>total deaths</td>
                <td>0</td>
            </tr>
            <tr>
                <td>total survived</td>
                <td>n/a</td>
            </tr>
            <tr>
                <td>the answer to life</td>
                <td>?</td>
            </tr>
        </table>
    </h3>
</div>

<div id="board" style="color:#99FF00; font-size:15pt; font-family:monospace;">
</div>

基本上，'包裝器'是父div。 我想以'儀表板'和'板'為中心。 我hava javascript在'board'中生成文本。

我大概希望它看起來像這樣：

Answer 1

使用絕對位置並聲明邊距如下，你很高興

演示

<style>
.container {
   width: 300px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px; /* Half of width */
   margin-top: -50px;    /* Half of height */
}

.left {
   float: left;
   width: 150px;
}

.right {
   float: right;
   width: 150px;
}
</style>

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

注意：不要忘記使用clear: both;清除浮子clear: both; 否則使用overflow: hidden; 在容器div上，目前正在使用height: 100%; 所以這里沒有問題

Answer 2

沒有浮動的解決方案： http ： //jsfiddle.net/GzvJH/

<div class="container">
   <div class="child"></div>
   <div class="child"></div>
 </div>

和css：

.container{
   width: 500px;
   height: 500px;
   line-height: 500px;
   text-align:center;
   border:1px solid red;
}

.child{

   width:100px;
   height:100px;
   border:1px solid black;
   display:inline-block;
}

Answer 3

<style>
    .container {
        text-align:center;
    }
    .twocolumns {
        width:50%
        display:inline-block;
    }
</style>
<div class="container">

    <div class="twocolumns">
          <p>Look at me im in column 1</p>
    </div>

    <div class="twocolumns">
          <p>Look at me im in column 2</p>
    </div>
</div>

我希望有所幫助！