关于使用jQuery设置元素CSS的问题

这段代码只需在jQuery中使用一个

.css（）

来居中显示页面。这是设置垂直居中，但水平（左）不起作用（请注意，我已经知道CSS中有一个

text align:center

规则，可以通过元素父级执行此操作，但我真的需要知道为什么jquery现在没有这样做？！）

---

你能告诉我如何解决这个问题吗？

在加载时，你的h1实际上是100%宽的，所以左方向可以工作——只是它只缩进了8px

---

将

h1{border:1px纯红；}

粘贴到小提琴的css中，您将看到

您必须添加一些测量值，如

px

或其他<代码>“left”：windowWidth/2-elementWidth/2+“px”@Vucko，感谢您的回复，但是为什么to设置工作正常？更改元素的位置可能会更改其尺寸

h1

是一个块元素，这意味着它将占用所有父元素的宽度，因此在您的示例中-

body

宽度。添加

h1{display:inline block}

就可以了-@Suffii-Vucko关于

block

元素的回答是正确的。通过在CSS中定义position:absolute，脚本计算时不使用其父脚本的全宽（因为它由于定位而被从DOM流中删除）-否则，它使用100%的宽度。8px是

正文

的边距。添加

body{margin:0}

，它将被删除，

h1

将具有

left:0px

。

var elemntHeight = $("h1").height();
var elementWidth =  $("h1").width();

var windowHeight = $(window).height();
var windowWidth  = $(window).width();

$("h1").css({
    "position" : "absolute",
    "left" :  windowWidth /2 - elementWidth/2,
    "top":  windowHeight/2 - elemntHeight /2
});