CSS:将文本放置在页面中间
CSS:将文本放置在页面中间
提问于 2011-10-31 06:23:59
我想在任何用户的页面中间放置一个<h1>。我一直在网上搜索，他们都把它放在了错误的位置。谢谢!
更新:我的意思是垂直和水平！正好在中间！
还有:在页面上没有任何。
回答 3
Stack Overflow用户
回答已采纳
发布于 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/
Stack Overflow用户
发布于 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>
Stack Overflow用户
发布于 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上工作。
编辑：我对其进行了修改，使其在每次调整窗口大小时居中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7948333
复制相关文章
相似问题