Html 水平中心可变宽度div内div，鼠标事件旁边必须通过？

如何将可变宽度div水平居中放置在另一个div内，并与顶部有特定偏移（或垂直居中）？另外一个条件是，只有div的可见部分必须截获鼠标事件——这限制了一些选项

+--------------+
|  outer div   +
|   <innner>   +
+--------------+

+--------------+
|外分区+
|      +
+--------------+

内部

包含可单击的元素，必须位于堆叠顺序的顶部。

外部分区

也可以单击，因此

内部分区

周围的区域必须将鼠标事件传递给底层分区。

内部分区

是一个可变宽度<代码>内部必须与

外部

的顶部有一定的偏移

---

我知道有很多相关的定心问题，但这里的鼠标事件方面使这有所不同。

假设您有一个带有类outer的outer div，其中还有一个具有class=“inner”的div。 可通过css实现对中：

.outer {
    height: 100px;
    width: 200px;
    line-height: 100px;
    border: 1px solid red;
    text-align: center;
}

.inner {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border: 1px solid blue;
}

我在外部div中添加了click事件，对于内部div中的按钮，默认情况下，按钮click将传播到外部div

---

演示：

刚刚回答了@Mr.Alien，这并不能解决鼠标问题。该表阻止所有鼠标事件到达底层元素。您能给我们看一些代码吗？