将<h1>标签居中放置在<div>中。

Question

将<h1>标签居中放置在<div>中。

46

我在<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>？

<h1>将比AlertDiv小。

- VansFannel

7个回答

12

在hX标签上

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

- bluehallu

1

为什么自动左/右侧需要width属性？ - brookr

在我的情况下，只需添加宽度，因为文本已经居中对齐，它就有效了！谢谢。这是一个适用于大多数情况的非常简单的答案。 - pollux1er

11

有一种新的方法，使用transforms。将其应用于要居中的元素。它通过容器高度的一半向下移动，然后通过元素高度的一半进行“修正”。

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

大部分时间它都能正常工作。我遇到了一个问题，即一个div在一个li中的div中。列表项设置了高度，外部的div组成了3列（Foundation）。第二和第三列div包含图片，使用这种技术可以很好地居中，然而第一列的标题需要一个具有明确高度设置的包裹div。

现在，有没有人知道CSS人员是否正在开发一种像易于对齐之类的东西呢？既然已经是2014年，即使我的一些朋友经常使用互联网，我想知道是否有人考虑过居中会是一个有用的样式特性了。只有我们吗？

- Luke Puplett

我使用这种技术来水平对齐某些元素，特别是在 text-align:center; 无法正确工作的情况下。position:relative; left:50%;transform:translateX(-??%)... "??" 必须根据元素的宽度进行微调。我知道这有点 hacky，但在我尝试过的屏幕上似乎可以正常工作。 - whitebeard

我发现在不同的屏幕尺寸上，使用 transform:translateX(-??em) 比 ??% 更可靠。 - whitebeard

除此之外，Google Chrome 开发团队发布的有关居中的新视频非常酷炫。视频链接：https://www.youtube.com/watch?v=ncYzTvEMCyE - Luke Puplett

2

这里开始了一个jsFiddle。

看起来，水平对齐可以通过使用text-align: center来实现。仍然在尝试让垂直对齐生效；可能需要使用absolute定位和类似top：50％或从顶部预先计算出的padding。

- pixelbobby

2

<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/

- Matthew Riches

2

您可以为h1添加填充：

#AlertDiv h1 {
  padding:15px 18px;
}

- kei

1

你可以使用 display: table-cell 来将 div 渲染成表格单元格，然后像在普通表格单元格中一样使用 vertical-align。

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

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

- Nicu Surdu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcel · Accepted Answer

如果你知道警告标题只会有一行，你可以在 #AlertDiv h1 中添加 line-height:51px。同时，在#AlertDiv 中添加 text-align:center。

#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