在HTML中，如何将文本对齐在div纵轴的中心

Question

如何在HTML中对齐div纵轴中心的文本？我试过使用text-align:center;，但它只将文本放在横轴上。对于Y轴，是否有等效的语句？我试图对每个具有.subcol类的div和具有#topid的div执行此操作。

body {
margin: 15px;
}
.subcol {
background: teal;
color: white;
border-radius: 7px;
text-align: center;
margin: 0 5px 5px 0;
height: 50px;
}
#top {
background: cyan;
width: 100%;
height: 150px;
text-align: center;
font-style: bold;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div id="top">Hello World Page</div>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 1
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 2
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 3
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 4
</div>
</div>
</div>

Answer 1

只需使用flex:即可实现

display: flex;
justify-content: center;
align-items: center;

justify-content: center->表示水平居中。

align-items: center->表示垂直中心。

只需将这个css添加到你想要的类中。

工作用途：

body{
margin:15px;
}
.subcol {
background:teal;
color:white;
border-radius:7px;
text-align:center;
margin:0 5px 5px 0;
height:50px;
display: flex;
justify-content: center;
align-items: center;
}
#top {
background:cyan;
width:100%;
height:150px;
text-align:center;
font-style:bold;
display: flex;
justify-content: center;
align-items: center;
}

<div id="top">Hello World Page</div>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 1
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 2
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 3
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 4
</div>
</div>
</div>

Answer 2

添加与您的div高度相同的行高度。

body{
margin:15px;
}
.subcol {
background:teal;
color:white;
border-radius:7px;
text-align:center;
margin:0 5px 5px 0;
height:50px;
line-height:50px; /* added */
}
#top {
background:cyan;
width:100%;
height:150px;
line-height:150px;  /* added */
text-align:center;
font-style:bold;
}

<title>Bootstrap Test</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div id="top">Hello World Page</div>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 1
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 2
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 3
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 4
</div>
</div>
</div>

Answer 3

HTML中有很多方法；CSS

我通常使用以下方法。

我希望这对你有帮助

.p {
width: 100px;
height: 20px;
position: relative;
border: 1px solid red;
}
.c {
width: 10px;
height: 5px;
border: 1px solid blue;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%)
}

<div class='p'>
<div class='c center'></div>
</div>