如何在 div 块内将文本(水平和垂直)居中?
P粉969253139
2023-08-24 16:58:26
<p>I have a <code>div</code> set to <code>display:block</code> (<code>90px</code> <code>height</code> and <code>width</code>), and I have some text inside.</p>
<p>我需要文本在垂直和水平方向上居中对齐。</p>
<p>I have tried <code>text-align:center</code>, but it doesn't do the vertical centering part, so I tried <code>vertical-align:middle</code>, but it didn't work.</p>
<p>有什么想法吗?</p>
截至 2014 年的常用技术:
Approach 1 -
transform
translateX
/translateY
:此处示例 / 全屏示例
In supported browsers (most of them), you can use
top: 50%
/left: 50%
in combination withtranslateX(-50%) translateY(-50%)
to dynamically vertically/horizontally center the element.方法 2 - Flexbox 方法:
此处示例 / 全屏示例
In supported browsers, set the
display
of the targeted element toflex
and usealign-items: center
for vertical centering andjustify-content: center
for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).Approach 3 -
table-cell
/vertical-align: middle
:此处示例 / 全屏示例
In some cases, you will need to ensure that the
html
/body
element's height is set to100%
.For vertical alignment, set the parent element's
width
/height
to100%
and adddisplay: table
. Then for the child element, change thedisplay
totable-cell
and addvertical-align: middle
.For horizontal centering, you could either add
text-align: center
to center the text and any otherinline
children elements. Alternatively, you could usemargin: 0 auto
assuming the element isblock
level.Approach 4 - Absolutely positioned
50%
from the top with displacement:此处示例 / 全屏示例
This approach assumes that the text has a known height - in this instance,
18px
. Just absolutely position the element50%
from the top, relative to the parent element. Use a negativemargin-top
value that is half of the element's known height, in this case --9px
.Approach 5 - The
line-height
method (Least flexible - not suggested):此处示例
In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a
line-height
value on the child element equal to the fixed height of the parent element.尽管此解决方案在某些情况下有效,但值得注意的是,当有多行文本时,它不起作用 - 像这样。
方法 4 和 5 并不是最可靠的。选择前 3 个之一。
如果是一行文本和/或图像,那么很容易做到。只需使用:
就是这样。如果可以是多行的话,那就稍微复杂一些。但 http://pmob.co.uk/ 上有解决方案。查找“垂直对齐”。
因为它们往往是 hack 或添加复杂的 div...我通常使用带有单个单元格的表格来完成它...以使其尽可能简单。
2020 年更新:
除非您需要使其在 Internet Explorer 10 等早期浏览器上运行,否则您可以使用 Flexbox。它受到当前所有主要浏览器的广泛支持。基本上,容器需要指定为弹性容器,并沿其主轴和横轴居中:
为子项指定固定宽度,称为“弹性项目”:
示例:http://jsfiddle.net/2woqsef1/1/
To shrink-wrap the content, it is even simpler: just remove the
flex: ...
line from the flex item, and it is automatically shrink-wrapped.示例:http://jsfiddle.net/2woqsef1/2/
上述示例已在包括 MS Edge 和 Internet Explorer 11 在内的主要浏览器上进行了测试。
One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the
flex-direction: column;
to the flex container. This is how it works between a flex container and its immediate child elements.There is an alternative method of doing the centering: by not specifying
center
for the distribution on the main and cross axis for the flex container, but instead specifymargin: auto
on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.2016 / 2017 年更新:
It can be more commonly done with
transform
, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:示例:https://jsfiddle.net/wb8u02kL/1/
收缩包裹宽度:
上面的解决方案对内容区域使用了固定宽度。要使用收缩包装宽度,请使用
示例:https://jsfiddle.net/wb8u02kL/2/
如果需要 Internet Explorer 10 的支持,则 Flexbox 将不起作用,而上面的方法和
line-height
方法将起作用。否则,flexbox 就可以完成这项工作。