如何将文字放在内部div的中心？
显示键
我想要得到的是以下图像。
有两个div。内部div位于外部div的中心，文本box1位于内部div的中心。
CSS代码无法达到目标。
div.father {
align-items: center;
border: 1px solid black;
display: flex;
height: 300px;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
}
div.son {
border: 1px solid black;
height: 100px;
width: 100px;
}
<div class="father">
<div class="son">box1</div>
</div>
如何将box1div放在div.son的中心？
alexwc_
您可以使用弹性盒。这是我的小提琴。
div.father {
border: 1px solid black;
align-items: center;
justify-content: center;
display: flex;
height: 300px;
width: 300px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
/**/
margin-top: 100px;/*only for snippet spacing*/
}
div.son {
border: 1px solid black;
height: 100px;
width: 100px;
align-items: center;
justify-content: center;
display: flex;
}<div class="father">
<div class="son">box1</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何将按钮放在内部网格上？
- 2
如何将 ap 放在 div 的中心？
- 3
您如何在内部以表格为中心的分区？
- 4
将div内部的div放在页脚中心
- 5
单击后如何将图像存储在内部存储器中？
- 6
将div环绕在内部div中
- 7
如何将文字放在特定字符位置的中心？
- 8
您如何在内部div内设置跨度？
- 9
将文字放在父div的水平中心
- 10
div在内部div上的阴影
- 11
如何将容器放在列的中心？
- 12
如何将图像放在视图的中心？
- 13
如何将字符串转换为对象并在内部循环javascript中使用？
- 14
将文本值定位在内部提交到中心
- 15
在内部写入文字时，如何摆脱任何html标记（div，p，span）顶部和底部的多余填充
- 16
如何替换<div class =“ definition”> </ div>内部的内容，但是如果{}在内部，则如何替换？
- 17
在内部div上滚动？
- 18
在内部div上滚动？
- 19
将处理程序停在内部
- 20
如何将一段文字放在HTML，CSS或JavaScript的特定单词的中心？
- 21
无法找到保存的数据到内部存储中的文本文件，如何将文件保存在内部存储的android studio中？
- 22
git status在内部如何工作？
- 23
printf在内部如何工作？
- 24
Python语法在内部如何使用？
- 25
Linux的mv在内部如何工作？
- 26
热部署在内部如何工作？
- 27
bignums在内部如何表示？
- 28
cacheDisplayInRect在内部如何工作？
- 29
了解$ .proxy在内部如何工作
我来说两句