内容未放置在分区中心
我试着在一个div的中心做一个form,t认为所有的值都是正确的,但是form没有得到中心,这是form在div的内容中的代码,但是form粘在div的上面,我不知道为什么
form#id {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 30px;
}
.container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.square {
position: relative;
width: 80vmin;
border: solid white 5px;
box-sizing: border-box;
align-items: center;
justify-content: center;
border-radius: 30px;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
align-items: center;
justify-content: center;
}
.content {
position: absolute;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 29px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<div class="container">
<div class="square">
<div class="content">
<form id="id">
<label for="input1">write ID</label>
<input type="number" name="input1" id="input1" placeholder="id">
</form>
</div>
</div>
</div>
4条答案
按热度按时间dffbzjpn1#
.square:after
下的伪类将其推到顶部,因为它的padding bottom为100%。尝试注解整个块,您将在中间看到整个表单。sidenote:你可以使用
justify-content: center;
,因为它更快。jvlzgdj92#
我也是初学者,但我认为这会有帮助。
试试这个
padding-top:50%将把你的形式到广场的中心。
up9lanfz3#
在
.content
类中添加display:flex
hof1towb4#
这样有用吗
另外,请参见:https://blog.hubspot.com/website/center-div-css