如何垂直居中和右对齐图像？

Question

我希望图片位于<div>的右侧，但是垂直居中。

我希望它是flexbox或尽可能简单。

＆＃13;

＆＃13;

#container1 {
  width: auto;
  height: auto;
}
#div1 {
  width: 400px;
  height: 200px;
  border: 1px solid black;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: center;
}
#some_image {
  width: 50px;
  height: 25px;
}

＆＃13;

<div id="container1">
  <div id="div1"><img id="some_image" src="some_image.gif"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你很亲密

Flexbox解决方案

#div1 {
      width: 400px;
      height: 200px;
      margin: 1em auto;
      border: 1px solid black;
      display: flex;
      align-items: center;       /* vertical center */
      justify-content: flex-end; /* far right */
}

#some_image {
     width: 50px;
      height: 25px;
}

<div id="div1">
  <img id="some_image" src="http://lorempixel.com/image_output/abstract-q-c-50-25-6.jpg">
</div>

Answer 2

最好和最简单的方式（与所有浏览器兼容）使用transform: translate()功能与position: absolute结合使用。它允许在不预先知道盒子大小的情况下居中（水平和/或垂直），例如：

＆＃13;

＆＃13;

#container1 {
  position: relative;
  width: 100%;
  background: blue;
  height: 100px;
  margin: 20px 0;
}

#div1 {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%); /* safari ios*/
  -ms-transform: translateY(-50%); /* old IE */
  transform: translateY(-50%); /* standard */
  background:red;
  color:white;
}
#div2 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%); /* safari ios*/
  -ms-transform: translate(-50%,-50%); /* old IE */
  transform: translate(-50%,-50%); /* standard */
  background:red;
  color:white;
}

＆＃13;

<div id="container1">
    <div id="div1">Something you want</div>
</div>

<div id="container1">
    <div id="div2">Something you want</div>
</div>

＆＃13;

＆＃13;

＆＃13;