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

假设我们有两个要素。其中一个是容器，另一个是绝对定位的小部件（例如，工具提示）。我使用此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/

最佳答案

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

.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>

关于css - 将一个元素相对于另一个元素居中，但永远不会离开屏幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42121577/