Vertical Alignment of SVG in CSS

jsfiddle 1 – You can use position:relative on the container and position:absolute on the objects like this:

  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;

The top: 50% moves the object to the container’s vertical center picking the top of the object as reference (not its center), so the transform: translateY moves it a distance of 50% of it’s size upwards to let it exactly on the middle of the container (by the objects center).

ps: the text-align:center; left:0; right:0; and margin:auto are for horizontal align.

jsfiddle 2 – Or use display:flex on the container with align-items to vertical align the content like this:

  display: -webkit-flex; /* Safari */  
  display: flex;
  -webkit-align-items: center; /* Safari 7.0+ */
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;

ps: the justify content is for horizontal align.