What are the CSS centering methods?

1.text-align:center;

Using the above method to center is to horizontally center the inline elements or text of display:inline; in the parent container.

2.inline-height: (height) value;

When using inline-height, it is often used together with height to center the content vertically. It is recommended to use it in the list Used in internal li;

3.margin:auto;

When using margin to center, usually when the element gives the exact width value, set margin :auto; or margin: 0 auto; have the same effect: the current element will be horizontally centered;

When using margin, you can also set the values ​​of margin-left and margin-right to be equal, and you can also achieve horizontal centering. ;

4. Position positioning and centering

Setting according to top and left or bottom and right can center the element horizontally and vertically; but the height of the parent element must be set ；

5.Flex box

Flex container’s flex-align:center;

　　　　align-items:center;

justify-cotent:center;

Project attribute align-self:center;

6. Negative margin:

 1 .box { 2     width: 600px; 3     height: 400px; 4     position: relative; 5 } 
 6  7 .box1 { 8     width: 300px; 9     height: 200px;10     padding: 20px;11     position: absolute;12     top: 50%;13     left: 50%;14     margin-left: -170px;/*(width+padding)/2 */15     margin-top: -120px;/*(height+padding)/2 */16 }

The above code can achieve horizontal and vertical centering of elements.

The above is the detailed content of What are the CSS centering methods?. For more information, please follow other related articles on the PHP Chinese website!