This question has already been answered:

How to make alignment of several lines vertically (by block height) so that the lines are in the center and go in order. Is there any way?

Reported as a duplicate by members of cheops , VenZell , aleksandr barakin , user194374, PashaPash ♦ Jun 16 '16 at 11:11 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • one
    Abstractions are good for understanding concepts, real problems need to be voiced specifically. The vague question is the general answer: use Flex . - user207618
  • @Other, that is, apply display: flex to p? - Andrei
  • @Andrey , yes to anything, the main thing is to have the acceptor display property :) - user207618

1 answer 1

 div.container { display: flex; // новое свойство, подробнее по ссылке* flex-flow: column wrap; // каждый элемент внутри контейнера начинается с отдельной строки align-items: center; // вертикально по центру justify-content: center; // горизонтально по центру width: 500px; // эти 3 свойства - чтобы увидеть в действии, не обращайте внимание, они в данном примере роли не играют height: 600px; border: 1px solid #000; } 
 <div class="container"> <p>Одна линия...</p> <p>2 линии...</p> <p>Да хоть 5 линий текста</p> </div>

* link

By the way, it is possible to level not only at a strictly known height. Interest is also suitable. The only thing you probably shouldn’t forget is that in order for an element to be aligned vertically in the parent, the parent must be vertically more than the child element. But this, I think, is so understandable.

  • By the way, the example inside this frame does not work. But everything is fine with me: imgur.com/QPZsF3L - smellyshovel