垂直居中 children 在 parent 中占据全屏
Vertically center children in parent that takes up the full screen
我试过了vertical-align:中间;和边距:自动 0;但它似乎没有用?我在这里缺少什么吗?我的逻辑是,我把 vertical-align: 放在中间;在 parent 容器中。 "children" class 不应该垂直居中吗?我也试过添加 padding:auto 0;到 "children" class 但这似乎也没有做任何事情...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: block;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
尝试在父级 class .content
中使用 display:flex
并在 .children
class 中使用 margin:auto
使其水平和垂直居中...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
.content .children {
margin: auto;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
但是 vertical-align
适用于具有 display:table-cell
的表...而且您还需要在元素本身而不是父元素中应用 vertical-align:middle
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: table;
width: 100%;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
}
.content .children {
vertical-align: middle;
display: table-cell;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
font-size: 50px;
}
.btn{
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover{
background-color: #38ada9;
cursor: pointer;
}
.content{
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
width:100%;
font-family: helvetica;
justify-content:center;
align-items:center;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
使用 flex 方法垂直对齐。
我试过了vertical-align:中间;和边距:自动 0;但它似乎没有用?我在这里缺少什么吗?我的逻辑是,我把 vertical-align: 放在中间;在 parent 容器中。 "children" class 不应该垂直居中吗?我也试过添加 padding:auto 0;到 "children" class 但这似乎也没有做任何事情...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: block;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
尝试在父级 class .content
中使用 display:flex
并在 .children
class 中使用 margin:auto
使其水平和垂直居中...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
.content .children {
margin: auto;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
但是 vertical-align
适用于具有 display:table-cell
的表...而且您还需要在元素本身而不是父元素中应用 vertical-align:middle
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: table;
width: 100%;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
}
.content .children {
vertical-align: middle;
display: table-cell;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
font-size: 50px;
}
.btn{
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover{
background-color: #38ada9;
cursor: pointer;
}
.content{
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
width:100%;
font-family: helvetica;
justify-content:center;
align-items:center;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
使用 flex 方法垂直对齐。