'HTML/CSS - Unable to have Vertical Align and no scrollbar [closed]

I am trying to do a DIV with vertically aligned text and no scroll bar. After some research I found I have to do something like this for the vertical alignment:

.container {
  height: 200px;
  position: relative;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
<div class="container">
  <div class="vertical-center">
    <p ng-dblclick="send({payload:true})">
      TEXT
    </p>
  </div>
</div>

This works. I have then to add the overflow: hidden; property and this I am not able to do. I tried several ways (like adding a third div between the twos with that property set) but always unable to achieve my goal.

EDIT: to clarify some of the questions I had. What I am trying to do is a small clickable text box. Width and height are fixed. My text might be longer than the width and/or might takes more lines than the height. So, I want the text always vertically centred and no scroll bar (nor x - nor y).

EDIT 2: the solution with flex works, it is what I was looking for. Thanks.

I hope it is clear.

Any help would be much appreciated. Thanks.

htmlcss


Solution 1:[1]

If what you want is to just align the content in the middle of the container vertically then you can just use flex

.container {
  background: #ddd;
  height: 200px;
  display: flex;
  align-items: center
}
<div class="container">
  <p>
    TEXT
  </p>
</div>

Solution 2:[2]

use the css

body{
    overflow-y: hidden;
}
.container {
  height: 200px;
  position: relative;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
<div class="container">
  <div class="vertical-center">
    <p ng-dblclick="send({payload:true})">
      TEXT
    </p>
  </div>
</div>

Solution 3:[3]

Another option

p{
  background: #ddd;
  height: 200px;
  line-height: 200px;
}
<p>TEXT</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 sameerAhmedjan
Solution 3 Kyle

Related Questions