HTML/CSS - Vertical Align no scrollbar-CodePudding

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 >
  <div >
    <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.

I hope it is clear.

Any help would be much appreciated. Thanks.

CodePudding user response：

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 >
  <p>
    TEXT
  </p>
</div>

CodePudding user response：

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 >
  <div >
    <p ng-dblclick="send({payload:true})">
      TEXT
    </p>
  </div>
</div>

CodePudding user response：

Another option

p{
  background: #ddd;
  height: 200px;
  line-height: 200px;
}

<p>TEXT</p>