我想在任何用户的页面中间放置一个<h1>
。我一直在网上搜索,他们都把它放在了错误的位置。谢谢!
更新:我的意思是垂直和水平!正好在中间!
还有:在页面上没有任何。
发布于 2011-10-31 06:31:00
试试这个CSS:
h1 {
left: 0;
line-height: 200px;
margin-top: -100px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
jsFiddle:http://jsfiddle.net/wprw3/
发布于 2016-08-17 03:05:16
下面是一个使用display:flex
的方法
.container {
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
}
<div class="container">
<div>centered text!</div>
</div>
发布于 2011-10-31 06:45:49
即使你已经接受了一个答案,我还是想发布这个方法。我使用jQuery来垂直居中,而不是css (尽管这两种方法都有效)。Here是个小菜一碟,不管怎样,我都会把代码贴在这里。
HTML:
<h1>Hello world!</h1>
Javascript (jQuery):
$(document).ready(function(){
$('h1').css({ 'width':'100%', 'text-align':'center' });
var h1 = $('h1').height();
var h = h1/2;
var w1 = $(window).height();
var w = w1/2;
var m = w - h
$('h1').css("margin-top",m + "px")
});
这将获取视口的高度,将其除以2,减去h1高度的一半,然后将该数字设置为h1的margin-top
。这种方法的美妙之处在于它可以在多行h1
上工作。
编辑:我对其进行了修改,使其在每次调整窗口大小时居中。
https://stackoverflow.com/questions/7948333
复制相似问题