如何使用CSS将div元素垂直居中？

问题描述

我真的是HTML和CSS的新手。我不了解JS，所以请只使用CSS。我阅读了一些有关居中的教程，但没有任何效果。我取得的最好成绩是水平居中。对于这些类的英文名称也感到抱歉。

body {
    font-family: "montserrat";
    background-color: #f301df;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    align-items: center;
    text-align: center;    
}

.kw {
    width: 275px;
    height: 500px;
    background-color: #ecf0f1;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    border-radius: 5px;
}

.kw:hover {
    width: 275px;
    height: 500px;
    background-color: #3498db;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    border-radius: 5px;
}

.kw ol {
    text-decoration: 0;
    list-style-type: none;
}

<div class="kw">
    <h4 class=kwgora>Podstrona 1</h4>
    <ol class=kwsrodek></ol>
    <ol class=kwdol></ol>
</div>

解决方法

添加显示：flex;和justify-content：居中放置，justify-content仅在她的显示为flex时才适用。

html,body {
min-height: 100%;
}
body {
    font-family: "montserrat";
    background-color: #f301df;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
    
}

.kw {
    width: 275px;
    height: 500px;
    background-color: #ecf0f1;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
}

.kw:hover {
    width: 275px;
    height: 500px;
    background-color: #3498db;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    border-radius: 5px;
}

.kw ol {
    text-decoration: 0;
    list-style-type: none;
}

  <div class="kw">
        <h4 class=kwgora>Podstrona 1</h4>
        <ol class=kwsrodek></ol>
        <ol class=kwdol></ol>
    </div>