2015년 7월 19일 일요일

[CSS Tip] vertical alignment of div

1. center center align

.child-element {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: orange;
}

2. right center align


.child-element {
  position: relative;
  top: 50%;
  right:0;
  transform: translate(0%,-50%);
  background: orange;
}



+
-webkit-
-ms- prefixes

ref from http://joshbroton.com/absolute-positioning-and-horizontal-vertical-centering/