this code centers element, if content taller container portion of top of element left above top of container. there method of forcing element stay within container? though i'm sure it's possible javascript, pretty ugly. rather css option. point me in right direction.
edit:
i not want "hide" overflow, want opposite. visit jsfiddle resize preview panel smaller element , see mean
html
<div class="fill"> <div class="myclass"> hello world! </div> </div> css
.fill { height:100%; width: 100%; } .myclass { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); }
wrap in inline-block container max-height: 100% , max-width: 100% apply positioning container. apply sizing , styling element inside container
(demo)
html
<div class="fill"> <div class="wrap"> <div class="myclass"> hello world! </div> </div> </div> css
.wrap { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); max-height: 100%; max-width: 100%; display: inline-block; } .myclass { width: 300px; height: 200px; } 