垂直居中-如何使内嵌元素垂直保持在块级元素的中间

Question

I have a <div> that is containing a sentence. The height of <div> is based of % (its height is changeable - depends on size of screen) . Now I want to keep that sentence in the center (vertically) of <div> , How can I do that?

Here is a sample of what I said:

 div{ position:absolute; border: 1px solid; width: 250px; height: 60%; text-align: center; } 

 <div>This should be center vertically</div> 

Answer 1

Use flexbox

 div{ position:absolute; border: 1px solid; width: 250px; height: 60%; text-align: center; display: flex; align-items: center; justify-content: center; } 

 <div>This should be center vertically</div> 

Answer 2

My favorite technique is to add an ::after pseudo-element to the parent element, wrap all the element's children in a single element, and let that element and the ::after pseudo-element play the inline-block, vertical-alignment game:

 div{ position:absolute; border: 1px solid; width: 250px; height: 60%; text-align: center; } div span { display: inline-block; vertical-align: middle; } div::after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } 

 <div><span>This should be centered vertically, and now it is!</span></div> 

The ::after pseudo-element having height: 100% will expand dynamically with the height of the parent, thus the inner element will always be centered vertically.

Answer 3

Seen two methods already. Here is another method using table and table-cell. give display: table to parent and table-cell and vertical-align: middle to the child and see the magic.

 div{ position:absolute; border: 1px solid; width: 250px; display: table; height: 60%; text-align: center; } div span { display: table-cell; vertical-align: middle; } 

 <div><span>This should be centered vertically</span></div>