Css 垂直和水平对齐表格单元格块_Css_Alignment_Vertical Alignment_Tablecell

Css 垂直和水平对齐表格单元格块

css

Css 垂直和水平对齐表格单元格块,css,alignment,vertical-alignment,tablecell,Css,Alignment,Vertical Alignment,Tablecell,我正在努力尝试垂直和水平对齐CSS键盘我相信我通过指定宽度和边距：auto正确地进行了水平对齐，但我不知道如何垂直对齐 HTML: JSFiddle：我已经读了一些教程、技巧和窍门，但我想不出来。有什么建议吗提前谢谢你的意思是，在屏幕的中间，底部？maindocu可以有一个固定的高度吗？我是说中间，但我相信多亏了Josh的链接，我把它整理好了。我已经尝试了其中的一些方法，但是我把它们组合错了！第一种方法成功了！谢谢 <body> <div class="main

我正在努力尝试垂直和水平对齐CSS键盘

我相信我通过指定宽度和边距：auto正确地进行了水平对齐，但我不知道如何垂直对齐

HTML:

JSFiddle：

我已经读了一些教程、技巧和窍门，但我想不出来。有什么建议吗

提前谢谢

你的意思是，在屏幕的中间，底部？maindocu可以有一个固定的高度吗？我是说中间，但我相信多亏了Josh的链接，我把它整理好了。我已经尝试了其中的一些方法，但是我把它们组合错了！第一种方法成功了！谢谢

<body>
    <div class="maindocu">
        <div class="keyboard">
            <div class="first_row">
                <div class="key">Q</div>
                <div class="key">W</div>
                <div class="key">E</div>
                <div class="key">R</div>
                <div class="key">T</div>
                <div class="key">Y</div>
                <div class="key">U</div>
                <div class="key">I</div>
                <div class="key">O</div>
                <div class="key">P</div>
            </div>
            <div class="second_row">
                <div class="key">A</div>
                <div class="key">S</div>
                <div class="key">D</div>
                <div class="key">F</div>
                <div class="key">G</div>
                <div class="key">H</div>
                <div class="key">J</div>
                <div class="key">K</div>
                <div class="key">L</div>
            </div>
            <div class="third_row">
                <div class="key">Z</div>
                <div class="key">X</div>
                <div class="key">C</div>
                <div class="key">V</div>
                <div class="key">B</div>
                <div class="key">N</div>
                <div class="key">M</div>
            </div>
        </div>
    </div>
</body>

a.maindocu{
 min-height: 100%;
}
.keyboard{
 display: block;
 border-spacing: 5px;
 margin: auto;
 position: relative;
 vertical-align: middle;
}

.first_row{
 display: block;
 margin: auto;
 width: 550px;
}

 .second_row{
 display: block;
 margin: auto;
 width: 490px;
}

 .third_row{
 display: block;
 margin: auto;
 width: 440px;
}

.key{
 display: table-cell;
 width: 50px;
 height: 50px;
 border-spacing: 5px;
 text-align: center;
 vertical-align: middle;
 font-family: "Verdana";
 font-size: 100%;
 color: #ffffff;
 background: #000;
 border: 5px solid #808080;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;

}