How to vertically center a div on page when changing content?

0 votes
asked Sep 13, 2017 by smallsani

I have a certain small text on the card which I was able to align center vertically. But if you make the text big then everything deteriorates.

I made two options and they work independently of each other, but they do not work together. In the large text some of the text is lost.

Important note: Text should always be centered vertically.

.article-div{ height: calc(100% - 100px); padding: 0px 40px 0px 40px; text-align: justify; overflow: auto;
}

Big text: CodePen

.article-div{ height: calc(100% - 100px); display: flex; flex: 1 0 auto; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; padding: 0px 40px 0px 40px; text-align: justify; overflow: auto;
}

Small text: CodePen

Thank you!

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...