Question

我试图在垂直和水平设置一个居中对齐的div，我试图通过设置div的宽度和高度来做，然后将它定位在固定的中心并将边距偏移50％。

这是使用

的CSS

#404-wrapper    {width:400px; height:200px; position:fixed; left:50%; top:50%; margin-top:-100px; margin-left:-200px;}
#404-wrapper a  {font-size:14px; line-height:120%;}

我也在这里做了一个jsfiddle - http://jsfiddle.net/wnGL3/

但我不明白为什么它不起作用，有什么想法？

Answer 1

重命名您的标记和css而不使用前面的数字

#wrapper    {width:400px; height:200px; position:fixed; left:50%; top:50%; margin-      top:-100px; margin-left:-200px;}
#wrapper a  {font-size:14px; line-height:120%;}

Answer 2

id属性可以合法地以HTML5中的数字开头，但您在CSS中仍会遇到问题。

如果您无法更改ID，则可以使用属性选择器：

[id="404-wrapper"] {}

演示：http://jsfiddle.net/wnGL3/10/

只是为了好玩，还有另一种方法可以使用unicode转义码：

#\00003404-wrapper {}

\000034代表数字4.演示：http://jsfiddle.net/wnGL3/11/

Answer 3

不幸的是，ID不能以数字开头。

来自Id的W3C规范

id = name [CS] 此属性为元素指定名称。该名称在文档中必须是唯一的。

http://www.w3.org/TR/html4/types.html#type-name在本文中，它描述了ID的“名称”是什么。

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“ _“），冒号（”：“）和句号（”。“）。

将ID更改为wrapper-404，它可以正常工作。

#wrapper-404    {width:400px; height:200px; position:fixed; left:50%; top:50%; margin-top:-100px; margin-left:-200px;}

#wrapper-404 a    {font-size:14px; line-height:120%;}

http://jsfiddle.net/rlemon/wnGL3/3/

Answer 4

使用position作为relative而不是fixed。它应该工作。

Answer 5

ID不能以css中的数字开头。

但你可以通过改变

来修复它

#404-wrapper

到

[id='404-wrapper']

Here是一个有效的例子。

css位置设置

5 个答案: