在 DIV 中居中放置 H1 标签

Posted 2023-03-05

【中文标题】在 DIV 中居中放置 H1 标签

【英文标题】：Center a H1 tag inside a DIV

【发布时间】：2011-09-09 10:24:12

【问题描述】：

我在 body 标签中有以下 DIV：

<div id="AlertDiv"><h1>Yes</h1></div>

这些是它们的 CSS 类：

#AlertDiv 
    position:absolute;
    height: 51px;
    left: 365px;
    top: 198px;
    width: 62px;
    background-color:black;
    color:white;


#AlertDiv h1
    margin:auto;
    vertical-align:middle;

如何在 DIV 内垂直和水平对齐 H1？

AlertDiv 将大于 H1。

【参考方案1】：

您可以向h1 添加填充：

#AlertDiv h1 
  padding:15px 18px;

【参考方案2】：

在 hX 标签上

width: 100px;
margin-left: auto;
margin-right: auto;

【讨论】：

为什么自动左/右工作需要width属性？

在我的情况下，只需添加宽度，因为文本已经居中对齐，它起作用了！谢谢 非常简单的答案，适用于大多数情况。

【参考方案3】：

您可以使用 display: table-cell 将 div 呈现为表格单元格，然后像在普通表格单元格中一样使用 vertical-align。

#AlertDiv 
    display: table-cell;
    vertical-align: middle;
    text-align: center;

你可以在这里试试： http://jsfiddle.net/KaXY5/424/

【参考方案4】：

有一种使用变换的新方法。将此应用于中心的元素。它将容器高度的一半向下移动，然后将元素高度的一半“校正”。

position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

它大部分时间都有效。我确实遇到了div 在div 中li 中的问题。列表项设置了高度，外部 divs 由 3 列（基础）组成。第 2 列和第 3 列 div 包含图像，并且使用这种技术可以很好地居中，但是第一列中的标题需要一个具有明确高度设置的包装 div。

现在，有谁知道 CSS 人员是否正在研究一种可以轻松对齐内容的方法？看到 2014 年，甚至我的一些朋友经常使用互联网，我想知道是否有人认为居中会是一个有用的样式功能。那么只有我们吗？

【讨论】：

在text-align:center; 无法正常工作的情况下，我使用这种技术水平对齐一些元素。 position:relative; left:50%;transform:translateX(-??%)...“？？”必须根据元素的宽度进行调整。我知道这有点 hacky，但似乎可以在我迄今为止尝试过的屏幕上工作。

我发现使用transform:translateX(-??em)实际上在各种屏幕尺寸上都比??%更可靠

除此之外 - Google Chrome 开发团队关于居中的新视频非常酷youtube.com/watch?v=ncYzTvEMCyE

【参考方案5】：

如果您知道 line-height:51px 到 #AlertDiv h1 将永远只有一行，则可以添加它。还要将text-align:center 添加到#AlertDiv。

#AlertDiv 
    top:198px;
    left:365px;
    width:62px;
    height:51px;
    color:white;
    position:absolute;
    text-align:center;
    background-color:black;


#AlertDiv h1 
    margin:auto;
    line-height:51px;
    vertical-align:middle;

下面的演示还使用负边距来保持#AlertDiv 在两个轴上居中，即使在调整窗口大小时也是如此。

演示：jsfiddle.net/KaXY5

【讨论】：

是的，只有一行。谢谢你的回答。

这确实是唯一真正有效的答案：您将高度和行高设置为相同，然后垂直对齐 CSS 属性将起作用。在高低搜索之后，这就是全部。

【参考方案6】：

开始了 jsFiddle here。

似乎水平对齐适用于text-align : center。仍在尝试使垂直对齐起作用；可能必须使用absolute 定位和类似top: 50% 或从顶部预先计算的padding。

【参考方案7】：

<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
    <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>

你可以试试这里的代码：

http://htmledit.squarefree.com/