The beauty of the combined use of display:table and display:table-cell in css

The content of this article is to introduce the benefits of the combination of display:table and display:table-cell in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Display's table and table-cell are generally not used much, so few people pay attention to them, but the two of them will surprise you when they join forces!

A question is raised here, as follows, how to center the multi-line text in the block vertically? When it comes to vertical centering, you will think of vertical centering of a single line of text. Line-height is equal to height; vertical centering of block-level elements, position positioning or flex layout. But here I introduce display: table and table-cell how to vertically center multi-line text. Although I don’t think it is used much, it is still useful at certain times. As follows

Directly enter the code:

html:

    <p>
        </p><p>会议认为，党的十八大以来，我国经济发展取得历史性成就、
                     发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力
                     再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。
        </p>
    

css:

       .parent {
           display: table;
           width: 300px;
           height: 300px;
           text-align: center;
       }
       .son  {
           display: table-cell;
           height: 200px;
           background-color: yellow;
           vertical-align: middle;
       }

After reading the code, you immediately understood. Here we only need to set the container to display:table and then it becomes a Block-level table element, sub-element display:table-cell makes the sub-element a table cell, and then just add vertical-align: middle to the sub-element just like in the table, and the multi-line text will be vertically centered. Isn’t it very direct and concise~

The above is the detailed content of The beauty of the combined use of display:table and display:table-cell in css. For more information, please follow other related articles on the PHP Chinese website!