CSS centering problem

Hello! I'm super Meow two! Just write a music player, which used to UL did not set the width of the high, propped up by Li, and then need to be centered in the UL parent Div. Just suddenly forget, and then check the next, the final appearance of the center effect, then the way to summarize the center of the problem bar ~ ~ ~

First, the horizontal center

1. Inline elements (text, images, links, etc.):

　　text-align: center;//对inline，inline-block，inline-table有效

2, block elements (div/p, etc.):

　　 margin: 0px auto;//无论宽度是否已知

(but add a sentence, is the beginning of the problem, I only need to set the UL Display:inline-block, the implementation of the center, the problem is still thinking, but it is recommended that you do not set the width of the block-level element is set to Inline-block, Then add the parent element text-align:center;)

3, multiple block-level elements

If there are multiple block elements that need to be centered horizontally, there are two ways to do this. One is with Inline-block and the other with flex. , sets the block element Display:inline-block, whose parent element is centered horizontally:

 .div1 {        text-align: center;    }     .div1 div2 {        display: inline-block;    }

With Flex, you need to add the following style to the parent element of the BLOCK:

 .div1 {        display: flex;        justify-content: center;    }

Second, vertical center

1. Inline elements:

Inline elements in a single line: One method can be set padding-top and Padding-bottom values equal to achieve the center, the other method is to know the height, set the line-height=height.

There are four ways to consider multiple rows of inline elements:

One: Sets the value of padding-top and Padding-bottom equal

Both: Universal Flex layout { display: flex; justify-content: center;  flex-direction: column;  height: 400px; }

three:vertical-align, This usage only started to touch CSS, I often use but no effect, and later found to use it (basically used in display table)

                   .div1 {display: table;}

                   .div1>div2 { display: table-cell;vertical-align: middle;}

Four: The last way to see it online: Cut a map directly:

2, block-level elements:

Block-level elements are mainly set by positioning margin,padding, etc.:

When the height of the div2 is known, it is assumed that relative to its parent element is Position:absolute

     　　{ position: absoulte;top: 50%; height: 100px;margin-top: -70px; //这里70px是height*1/2 + padding padding: 20px;}

　　　　 块元素高度不知道时

    　　　　{transform: translateY(-50%);        　　　　 top: 50%;       　　　　  

  　　　　万能的flex布局，和水平居中类似，只需要再加一句话:flex-direction: column;就ok了（flex布局还是蛮不错的，大家可以经常使用哇，菜鸟教程上都说了得到所有浏           览器的支持了哟）

三、水平垂直居中：

is to use some of these combinations.

For example flex layout, just add one sentence: align-items: center;

 {  position: absoulte;    top: 50%;        left: 50%;        margin: -120px 0px 0px -220px;    //height一半，width一半，另外加上padding值          height: 200px;        width: 400px;        
}   

{

  top: 50%;      left: 50%;      transform: translate(-50%, -50%);  

}
当然本文有自己的总结，也有从大神的博客中转载一些，具体情况具体讨论，大家多试试，就知道了~~~~~~~~~~如有错误/补充，欢迎提出！！！

CSS centering problem