CSS center summary, css center Summary

CSS center summary, css center Summary

1. text-align: center;

In the preceding method, the row element or text of the display: inline; in the parent container is horizontally centered.

2. inline-height: (height) value;

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

3. margin: auto;

When margin is used for residence, the exact width value is usually given in the element. Setting margin: auto; or margin: 0 auto; is the same effect: the current element is horizontally centered;

When using margin, you can also set the values of margin-left and margin-right to be equal and horizontally centered;

4. Center position

You can set top, left, bottom, and right to center the elements horizontally and vertically. However, the height of the parent element must be set;

5. Flex box

Flex-align: center;

Align-items: center;

Justify-cotent: center;

Align-self: center;

6. negative value 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 enables horizontal and vertical center of elements.