将项目放在页面的死点中心 [英] Centering an item in the dead center of a page

问题描述

我正在尝试在页面的中间放置一些大文本.我只想要(更喜欢)页面中的body标签，别无其他.我试过使用 display:table-cell 并将 vertical-alignment 设置为 middle ，但这不适用于 height:100％

I'm trying to place some large text in the dead center of the page. I only want (prefer) a body tag in the page and nothing else. I've tried using display: table-cell and setting the vertical-alignment to middle but that did not work with a height: 100%

然后，我在stackoverflow上发现了另一个问题，该问题已解决，但我意识到它不适用于较大的字体.这就是我到目前为止所拥有的: http://jsfiddle.net/aECYS/

I then found another question on stackoverflow which addressed this problem but I realized it does not work with bigger font. This is what I have so far: http://jsfiddle.net/aECYS/

推荐答案

根据指定的宽度和高度将div推到顶部和左侧.

Push the div to top and left based on the width and height specified.

CSS

 body{ background-color: #000;}
    div{
        background-color: #000;
        width:800px; 
        height: 200px; line-height: 200px;
        position: absolute;
        top: 50%; margin-top:-100px;
        left: 50%; margin-left:-400px;
        font-weight: bold;
        font-size: 100px;
        text-transform: uppercase;
        color: #ccc; text-align:center
    }​

演示

DEMO

这篇关于将项目放在页面的死点中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！