使用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的{​​{1}}为z-index。

普通屏幕 - 正确居中：

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

以下是小屏幕中应该如何正确的：

---

仅支持Google Chrome浏览器

注意：如果我向下滚动，则不应滚动和隐藏。我希望它（2）留在可见的屏幕区域。

更新：我会等一个星期，如果我没有得到实际居中div的答案（@ mutil的答案扩大了div），我会接受@ mutil的答案。

Answer 1

如何添加

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

并从left: 30%;移除.message_shower？

它不再固定大小，但它保持在中心位置。

更新了jsFiddle

---

如果你想让div具有精确的宽度，你可以将left和right设置为零，将margin设置为auto。

Demo