php <h1>怎么居中,html-如何在div中垂直居中放置H1？

html-如何在div中垂直居中放置H1？

首先，我道歉。 我知道这里针对此问题发布了各种解决方案，但是对于我一生来说，我无法让它们发挥任何作用。

对于响应式网站，我正在尝试将H1放在div中。

水平居中不是问题，但我无法使其垂直居中。 大概是我做错了或误解了我在这里(或可能两者)找到的解释。

因此，由于我可能以错误的方式解释了较早的解决方案，因此有人可以解释一下我到底要添加什么才能使h1垂直居中？

(为了使这个问题与尽可能多的人相关，我已经自己剥离了以前所有尝试的代码。)

CSS：

html, body {

height: 100%;

margin: 0;

}

#section1 {

min-height: 90%;

text-align:center

}

HTML：

Lorem ipsum

6个解决方案

108 votes

您可以使用display:table-cell实现垂直对齐：

#section1 {

height: 90%;

text-align:center;

display:table;

width:100%;

}

#section1 h1 {display:table-cell; vertical-align:middle}

例

更新-CSS3

对于垂直对齐的另一种方法，可以使用以下css 3，所有最新的浏览器均应支持该css 3：

#section1 {

height: 90%;

width:100%;

display:flex;

align-items: center;

justify-content: center;

}

更新的小提琴

Pete answered 2020-08-02T19:58:50Z

5 votes

您可以使用display属性来实现：

html, body {

height:100%;

margin:0;

padding:0;

}

#section1 {

width:100%; /*full width*/

min-height:90%;

text-align:center;

display:table; /*acts like a table*/

}

h1{

margin:0;

padding:0;

vertical-align:middle; /*middle centred*/

display:table-cell; /*acts like a table cell*/

}

演示：[http://jsfiddle.net/a3Kns/]

melancia answered 2020-08-02T19:59:14Z

1 votes

我已经成功地将文本放在span标签内，然后在该span上设置了vertical-align：middle。 虽然不知道这与跨浏览器的兼容性如何，但我仅在webkit浏览器中对其进行了测试。

benadamstyles answered 2020-08-02T19:59:34Z

1 votes

的HTML

Test Message

的CSS

#sample

{

height:100px;

width:100%;

background-color:#003366;

display:table;

text-align: center;

}

.vertical

{

color:white;

display:table-cell;

vertical-align:middle;

}

小提琴：演示

Amarnath Balasubramanian answered 2020-08-02T20:00:02Z

0 votes

这是jQuery方法。 看起来像是过分杀伤，但它会计算偏移量。

$(function(){

$('#jquery-center').center();

});

foo

smoore4 answered 2020-08-02T20:00:22Z

0 votes

只需在顶部和底部使用填充，它将自动使内容垂直居中。

Carloscar Tovar answered 2020-08-02T20:00:42Z