将项目置于页面的死点中心

时间:2013-01-03 07:26:37

标签: html css

我正在尝试在页面的死点放置一些大文本。我只希望(更喜欢)页面中的正文标记,而不是其他内容。我已尝试使用display: table-cell并将vertical-alignment设置为middle,但这不适用于height: 100%

然后我发现了另一个关于stackoverflow的问题,它解决了这个问题,但我意识到它不适用于更大的字体。这是我到目前为止:http://jsfiddle.net/aECYS/

3 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:1)

如果您的位置是绝对的,那么您可以将文本移动到任何想要更改css属性的位置。

注意:绝对定位的元素可以与其他元素重叠。

position: absolute;
top: 37%;
left: 34%;

See Demo

将宽度和高度设置为100%

width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;

然后是具有不同屏幕尺寸的文本中心

答案 2 :(得分:0)

.Absolute-Center {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 }

是最好的方法,尽管在这里选择你的课程。