如何将<kbd>内容</kbd>垂直居中<div></div><div id="text_translate"><p>我正在尝试制作钢琴，但我从基础开始。 我住在以<strong>div</strong>的内部内容为中心。 我希望它位于他父亲 div 的中间并居中</p><p>继承人代码：html</p><pre> &lt;div class="keys"&gt; &lt;div class="key" id="keyA"&gt; &lt;kbd&gt;A&lt;/kbd&gt; &lt;/div&gt; &lt;div class="key" id="keyS"&gt; &lt;kbd&gt;S&lt;/kbd&gt; &lt;/div&gt; &lt;/div&gt;</pre><p> css：</p><pre> * { margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: chocolate; }.keys{ padding: 4px 5px; position: fixed; height: 40%; max-height: 60%; width: 60%; max-width: 80%; display: flex; justify-content: space-around; top: 50%; left: 50%; transform: translate(-50%, -50%); border: white solid; align-items: center; text-align: center; }.key{ border: black solid 1px; font-family: 'Montserrat', sans-serif; font-size: 22px; max-height: 95%; height: 90%; width: 70px; max-width: 95%; border-radius: 10px; } kbd{ /*border to see the with and weight*/ border: pink solid 1px; color: aliceblue; }</pre><p> 这是一个小提琴： <a href="https://jsfiddle.net/hnd9jr4y/" rel="nofollow noreferrer">https://jsfiddle.net/hnd9jr4y/</a>谢谢</p></div>

Question

我正在尝试制作钢琴，但我从基础开始。 我住在以div的内部内容为中心。 我希望它位于他父亲 div 的中间并居中

继承人代码：html

    <div class="keys">
            <div class="key" id="keyA">
                <kbd>A</kbd>
            </div>
            <div class="key" id="keyS">
                <kbd>S</kbd>
            </div>
    </div>

css：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: chocolate;
}

.keys{
    padding: 4px 5px;
    position: fixed;
    height: 40%;
    max-height: 60%;
    width: 60%;
    max-width: 80%;
    display: flex;
    justify-content: space-around;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: white solid;
    align-items: center;
    text-align: center;


}
.key{
    border: black solid 1px;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    max-height: 95%;
    height: 90%;
    width: 70px;
    max-width: 95%;
    border-radius: 10px;

}
kbd{
    /*border to see the with and weight*/
    border: pink solid 1px;
    color: aliceblue;
  

}

这是一个小提琴： https://jsfiddle.net/hnd9jr4y/谢谢

Answer 1

使用 flexbox

.key{
    border: black solid 1px;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    max-height: 95%;
    height: 90%;
    width: 70px;
    max-width: 95%;
    border-radius: 10px;
    display: flex;
    align-items: center; // vertical centering
    justify-content: center; // horizontal centering
}

Answer 2

Flexbox 仅处理 flexbox 容器的直接内容。 要附加中心，键的名称添加到.key附加“flex-settings”。

看看下面的例子：

 * { margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: chocolate; }.keys{ padding: 4px 5px; position: fixed; height: 40%; max-height: 60%; width: 60%; max-width: 80%; display: flex; justify-content: space-around; top: 50%; left: 50%; transform: translate(-50%, -50%); border: white solid; align-items: center; text-align: center; }.key{ border: black solid 1px; font-family: 'Montserrat', sans-serif; font-size: 22px; max-height: 95%; height: 90%; width: 70px; max-width: 95%; border-radius: 10px; /* JUST ADD */ display: flex; align-items: center; justify-content: center; } kbd{ /*border to see the with and weight*/ border: pink solid 1px; color: aliceblue; }

 <div class="keys"> <div class="key" id="keyA"> <kbd>A</kbd> </div> <div class="key" id="keyS"> <kbd>S</kbd> </div> </div>