How to use display:table-cell to achieve vertical centering?

In web page layout, we often need to vertically center pictures or text. There are many ways to achieve vertical centering. Today I will introduce to you how to achieve vertical centering using the display:table-cell attribute. Let’s look at it below. See the specific content.

First of all, let’s take a brief look atdisplay:table-cell attribute

display:table-cell attribute means that the label element is presented in the form of a table cell, similar to td tag, use display:table-cell to vertically center elements with non-fixed sizes.

Next let’s look at a specific example of display:table-cell achieving vertical centering:

      
  
 
  
 
 
php中文网在线免费教程 
 
 
  

display:table-cell achieves vertical centering as follows:

Note: 1. IE6/7 does not support the display:table-cell attribute; 2. table-cell does not support the margin attribute (but supports padding), which is very rigid; 3. Try not to use it with floating/positioning at the same time, as it will destroy its css properties.

The above is the entire content of this article. For more knowledge about the display:table-cell attribute, you can refer to the php Chinese websitecss Learning Manual.

The above is the detailed content of How to use display:table-cell to achieve vertical centering?. For more information, please follow other related articles on the PHP Chinese website!