Html 如何在 <div> 容器内居中 <p> 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15121343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center a <p> element inside a <div> container?
提问by Johnsy
I want my <p>element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.
我希望我的<p>元素位于容器的中心<div>，就像完全居中一样——顶部、底部、左边距和右边距均等地分割空间。
How can I achieve that?
我怎样才能做到这一点？
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>回答by Fico
You dont need absolute positioning Use
你不需要绝对定位使用
p {
text-align: center;
line-height: 100px;
}
And adjust at will...
并随意调整...
If text exceeds width and goes more than one line
如果文本超过宽度并且超过一行
In that case the adjust you can do is to include the display property in your rules as follows;
在这种情况下，您可以做的调整是在您的规则中包含 display 属性，如下所示；
(I added a background for a better view of the example)
（我添加了背景以便更好地查看示例）
div
{
width:300px;
height:100px;
display: table;
background:#ccddcc;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}
Play with it in this JBin
在这个JBin玩它
回答by GordonsBeard
To get left/right centering, then applying text-align: centerto the divand margin: autoto the p.
以使左/右定心，然后应用text-align: center到div和margin: auto到p。
For vertical positioning you should make sure you understand the different ways of doing so, this is a commonly asked problem: Vertical alignment of elements in a div
对于垂直定位，您应该确保了解这样做的不同方式，这是一个常见问题：div 中元素的垂直对齐
回答by ashkan nasirzadeh
?you should do these steps :
？你应该做这些步骤：
- the mother Elementshould be positioned(for EXP you can give it position:relative;)
- the child Elementshould have positioned "Absolute" and values should set like this: top:0;buttom:0;right:0;left:0; (to be middle vertically)
- for the child Elementyou should set "margin : auto" (to be middle vertically)
- the child and mother Elementshould have "height"and"width"value
- for mother Element=> text-align:center(to be middle horizontally)
- 在母元件应该定位（EXP为你可以给它的位置是：相对;）
- 该子元素应该定位在“绝对”和值应该设置这样的：顶：0; BUTTOM：0;右：0;左：0; （垂直居中）
- 对于子元素，您应该设置“ margin : auto”（垂直居中）
- 在孩子和母亲元素应该有“高度”和“宽度”值
- 对于Mother Element=> text-align:center（水平居中）
??simply here is the summery of those 5 steps:
??以下是这 5 个步骤的总结：
.mother_Element {
position : relative;
height : 20%;
width : 5%;
text-align : center
}
.child_Element {
height : 1.2 em;
width : 5%;
margin : auto;
position : absolute;
top:0;
bottom:0;
left:0;
right:0;
}
回答by freddy mercury
on the p element, add 3 styling rules.
在 p 元素上，添加 3 个样式规则。
.myCenteredPElement{
margin-left: auto;
margin-right: auto;
text-align: center;
}
回答by Zoltán
This solution works fine for all major browsers, except IE. So keep that in mind.
此解决方案适用于所有主要浏览器，IE 除外。所以记住这一点。
In this example, basicaly I use positioning, horizontal and vertical transform for the UI element to center it.
在这个例子中，我基本上对 UI 元素使用了定位、水平和垂直变换来使其居中。
.container {
/* set the the position to relative */
position: relative;
width: 30rem;
height: 20rem;
background-color: #2196F3;
}
.paragh {
/* set the the position to absolute */
position: absolute;
/* set the the position of the helper container into the middle of its space */
top: 50%;
left: 50%;
font-size: 30px;
/* make sure padding and margin do not disturb the calculation of the center point */
padding: 0;
margin: 0;
/* using centers for the transform */
transform-origin: center center;
/* calling calc() function for the calculation to move left and up the element from the center point */
transform: translateX(calc((100% / 2) * (-1))) translateY(calc((100% / 2) * (-1)));
}<div class="container">
<p class="paragh">Text</p>
</div>I hope this help.
我希望这会有所帮助。
回答by Milche Patern
Centered and middled content ?
中心内容和中间内容 ?
Do it this way :
这样做：
<table style="width:100%">
<tr>
<td valign="middle" align="center">Table once ruled centering</td>
</tr>
</table>
Ha, let me guess .. you want DIVs ..
哈，让我猜猜.. 你想要 DIV ..
just make your first outter DIV behave like a table-cell then style it with vertical align:middle;
只需让您的第一个外部 DIV 表现得像一个表格单元格，然后使用垂直 align:middle 对其进行样式设置；
<div>
<p>I want this paragraph to be at the center, but I can't.</p>
</div>
div {
width:500px;
height:100px;
background-color:aqua;
text-align:center;
/* there it is */
display:table-cell;
vertical-align:middle;
}
回答by John
You only need to add text-align: centerto your <div>
您只需要添加text-align: center到您的<div>
In your case also remove both styles that you added to your <p>.
在您的情况下，还删除您添加到<p>.
Check out the demo here: http://jsfiddle.net/76uGE/3/
在这里查看演示：http: //jsfiddle.net/76uGE/3/
Good Luck
祝你好运
