0

I have an element centered in the middle of a page. If the page shrinks to less than the height of the element, I need to still show the top of the element instead of being centered. I would like the element's container to be scrollable.

.card-display {
  margin: auto;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 400px;
  background-color: grey;
  border-radius: 10px;
}
<div class="card-display" >
  <div>
    always need top line visible (i.e., if there is enough container height to fit the grey element, it should be vertically centered, otherwise container have scrolling)
  </div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
ComputerCarl
  • 66
  • 3
  • Here is a sample using your code: http://jsfiddle.net/Lycz3ngp/ – Asons Jul 23 '18 at 15:51
  • Another problem solved by Flexbox.. very simple. This is the answer, but how do I mark as answer and close this? – ComputerCarl Jul 24 '18 at 01:50
  • It is closed as a dupe, and as such no need to mark. The fiddle were just me helping out with a quick update of your code. – Asons Jul 24 '18 at 07:07

1 Answers1

0

Check this if it's works for you : Wrap card-display to apply Flex centered way. jsfiddle

.container {
  display:flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  width: 100%;
  height: 100%;
}
.card-display {
  align-items:center;
  position:absolute;
  width: 300px;
  height: 400px;
  border-radius: 10px;
  background-color: gray
}
@media screen and (max-height:400px) {
 body {
   background-color: blue;
 }
 .container {
   align-items:baseline;
 }
}

html:

<div class="container">
 <div class="card-display">
  <div>
   always need top line visible
  </div>
 </div>
</div>
hbo360
  • 1
  • 1