前端之家收集整理的这篇文章主要介绍了
html – 如何将一个元素集中在容器中？，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我想要我的< p>元素位于容器的中心< div>中,完全居中 – 顶部,
底部,左侧和右侧边缘均匀地分开空间.
我该如何实现呢？
div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}
<div>
<p>I want this paragraph to be at the center,but it's not.</p>
</div>
你不需要绝对的定位
使用
p {
text-align: center;
line-height: 100px;
}
随意调整
如果文本超出宽度并且超过一行
在这种情况下,您可以做的调整是将display属性包含在您的规则中,如下所示：
(我添加了一个更好的例子的背景)
div
{
width:300px;
height:100px;
display: table;
background:#ccddcc;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}
在这个JBin玩
原文链接：https://www.f2er.com/html/231328.html
