将一个元素相对居中，但永远不会离开屏幕

Question

想象一下，我们有两个元素。其中一个是容器，另一个是绝对定位的小部件(例如工具提示(。我使用此 CSS 代码将一个居中：

.container {
    position: relative;
}
.widget {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

.container可以位于页面上的任何位置，[************]表示小部件。上面的 CSS 导致：

|    [.container]   |
|   [************]  |

但是，当.container靠近屏幕边缘时会出现问题，因为这样小部件的一部分就会被放置在屏幕之外并且不可见：

|[.container]       |
|************]      |

我的问题是：有没有聪明的方法来确保这个元素永远不会在不使用JavaScript的情况下被定位在屏幕上？我只支持现代浏览器，使用 calc 或vw就可以了。我可以自由修改HTML和CSS。小部件具有固定宽度。

本例中的预期结果：

|[.container]       |
|[************]     |

摆弄问题：https://jsfiddle.net/5xdhhh8f/1/

Answer 1

由于您只是水平居中，因此您可以使用以下内容来居中并包含元素。

.container{
  text-align:center;
 }
.widget{
  display:table;
  margin:0 auto;
  border:1px solid #000;
}

<div class="container">
  SOME TEXT
  <div class="widget">SOME WIDGET</div>
</div>