将固定容器居中于引导轮播答案

【问题标题】：Centered a fixed container over bootstrap carousel将固定容器居中于引导轮播
【发布时间】：2014-01-05 07:16:12
【问题描述】：

我有一个全屏版本的引导轮播，效果非常好。

但是，我想将包含三个图标的 div 水平和垂直居中，并将其固定在滑动轮播图像上。

我已尝试为班级设置宽度：

.centered {
  position:fixed; 
  width: 500px;
  margin: 0 auto;

 }

但是，这三个图标并没有从左上角开始。

如果您想检查我的 HTML 代码，这里是该网站的链接：

http://www.gregorydanelian.comule.com/stu/

非常感谢程序员！

【问题讨论】：

固定位置需要xy位置和高宽。
是的。我已经尝试过了，但它不在文档窗口中居中，它太靠右了。 .centered { position:fixed; z-index: 100; top:50%; left:50%; width: 500px; height:200px; }
它将在宽度和高度内居中。查看：coding.smashingmagazine.com/2013/08/09/… 并阅读整篇文章
谢谢您，它已修复并保持响应。稍后会发布答案。

标签： html css twitter-bootstrap-3 carousel centering

【解决方案1】：

使用绝对/固定居中：

  .parent {
     position: relative;
  }
  .centered {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     width: 500px;
     height: 200px;
 }

使用此方法，您将水平和垂直居中。缺点是您需要固定居中元素的宽度和高度。

这里是position: fixed;http://jsfiddle.net/ngP8f/的版本

祝你好运！

【讨论】：