构建一个位于html中间的右侧菜单。

Question

首先，我很抱歉，我创建了这个新的问题，但我已经寻找了一段时间的菜单/导航，坚持在正确的中间的html页面。例如，您可以看到在本页左侧浮动的社交插件：http://www.addthis.com/social-buttons

我想与我自己的图片做一个类似的，导致不同的html页面。希望有人能帮忙。

Answer 1

将此应用于菜单的容器div：

.menu {
  position: fixed;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

Answer 2

您可以使用一些CSS3平面定位(比如轴转换属性)来实现这一点，但我认为更好的方法是通过使用Flexbox。

只需在元素周围创建一个容器，并为其提供以下属性：

.container {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

当然，您的元素将在.container div中。

这是前缀的版本，这是为什么这是如此长。