html - 使用 z-index 正确居中元素

Question

页面结构:

div#help
-- div
  -- ul
    -- li
    -- li
-- div
  -- ul
    -- li
    -- li
-- div.message_shower
  -- p  /*small `x` for close button*/
  -- div.content

每当任何列表项<li>被点击，一个div.message_shower打开有一些文本。

---

FIDDLE (您可以忽略 JS 和 HTML 选项卡)

---

问题:我想将 div.message_shower 居中在屏幕上，水平和垂直。即使在使用百分比单位后，它也不起作用。 margin: 0 auto;也不起作用。注意 .message_shower有一个 z-index的 2 .

普通屏幕 - 正确居中:

屏幕有点小 - 没有正确居中:

在小屏幕上它应该是这样的:

---

仅 Google Chrome 需要支持

注意:如果我向下滚动，它不应该被滚动和隐藏。我希望它 ( .message_shower ) 留在可见屏幕区域。

更新:我将等待一个星期，如果我没有得到任何真正使 div 居中的答案(@mutil 的答案加宽了 div)，我将接受@mutil 的答案。

Answer 1

如何添加

width: calc(100% - 200px);
margin: 0 70px;

并从 .message_shower 中删除 left: 30%;?

它不再是固定大小的，而是保持在中心。

已更新 jsFiddle

---

如果您希望 div 具有精确的宽度，您可以将 left 和 right 都设置为零，并将 margin 设置为 auto。

Demo