css horizontal centering and vertical centering_html/css_WEB-ITnose

Horizontal centering:
Inline elements: text-align:center; Centered display relative to the parent
Block-level elements: margin:0 auto; but width is required at the same time, otherwise it cannot See the effect
Multiple block-level elements are centered: I would like to discuss display:inline-block; and display:flex;
Method 1: Set text-align:center; on the parent; on the element Setting: display: inline-block; At the same time, in order to make the text display to the left, set text-align: left; the display in the browser is that the child element height is adaptive and the bottom is aligned.
Method 2: Set display:center;justify-content:center on the child element; the height of the child element is consistent, which is the same as the height of the element with the most content.
The two methods are compatible with Google, Firefox, and 360, but the second method is not compatible with IE10, and previous IE versions are also incompatible. Of course, we also have to deal with the problem of separation from the layer due to floating, and the parent background color cannot be added.

 1 <main class="inline-block-center"> 2   <div> 3     I'm an element that is block-like with my siblings and we're centered in a row. 4   </div> 5   <div> 6     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. 7   </div> 8   <div> 9     I'm an element that is block-like with my siblings and we're centered in a row.10   </div>11 </main>

 1 <main class="flex-center"> 2   <div> 3     I'm an element that is block-like with my siblings and we're centered in a row. 4   </div> 5   <div> 6     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. 7   </div> 8   <div> 9     I'm an element that is block-like with my siblings and we're centered in a row.10   </div>11 </main>

 1 body { 2   background: #f06d06; 3   font-size: 80%; 4 } 5 main { 6   background: white; 7   margin: 20px 0; 8   padding: 10px; 9 }10 main div {11   background: black;12   color: white;13   padding: 15px;14   max-width: 125px;15   margin: 5px;16 }17 .inline-block-center {18   text-align: center;19 }20 .inline-block-center div {21   display: inline-block;22   text-align: left;23 }24 .flex-center {25   display: flex;26   justify-content: center;27 }

Vertically centered:

Method 1: Set the values ​​of padding-top and padding-bottom to be equal
Method 2: Set the values ​​of height and line-height to be equal
Method 3: Fixed height can be handled in a way position:absolute; top:50%;height:100px;margin-top:-50px;If the height is not fixed, you can also use js to dynamically obtain the height.
There are also some properties of CSS3, which are not described in consideration of compatibility issues.