我正在尝试编写我自己的CSS来模拟这个网站的design。目前，我使用此代码将屏幕分为四个部分：
HTML格式：
<body>
<div class="topnav">
Welcome to TBD
</div>
<a href="URL">
<div class="part1"></div>
</a>
<div class="part2"></div>
<div class="part3"></div>
<a href="URL">
<div class="part4"></div>
</a>
</body>
CSS:
html,body
{
padding:0;
margin:0;
height:100%;
min-height:100%;
}
.part1 {background-color:#722F37; width:50%; height:50%; float:left}
.part2 {background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left}
.part4 {background-color:#7F171F; width:50%; height:50%; float:left}
我想在我创建的每个div的中心直接放置一个some文本和一个图像。我试图这样做，但只能让文本显示在每个div的顶部，而不是死点。我怎么能这样做？
Here是我当前布局的提琴。
最佳答案
你可以用flexbox。
下面是使用flexbox解决的代码：https://jsfiddle.net/r49t61ka/
但我强烈建议你看看这篇文章：A Guide to Flexbox
.part{
display:flex;
justify-content: center; //Center the element horizontally
align-items: center; //Center the element vertically
}
<a href="URL">
<div class="part1 part">asd</div>
</a>
<div class="part2 part">asd</div>
<div class="part3 part">asdsd</div>
<a href="URL">
<div class="part4 part">asdsdsd</div>
</a>
关于html - 在Div的精确中心显示图像和文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45394534/