Css horizontal and vertical center, css horizontal center

Css horizontal and vertical center, css horizontal center

Horizontal center:
Inline element: text-align: center; displayed in center relative to parent
Block-level element: margin: 0 auto; but the width must be the same; otherwise, the effect cannot be seen.
Center multiple block-level elements: here we want to discuss display: inline-block; and display: flex;
Method 1: set text-align: center on the parent level, display: inline-block on the element, and text-align: left; displayed in the browser, 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 the same as that of the most content in the element.
Both methods are compatible with Google, Firefox, and 360, but the 2nd methods are not compatible with IE10. Earlier IE versions may be considered incompatible. Of course, the problem that the parent background color cannot be added due to floating occurs.

 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>

<main class="flex-center">  <div>    I'm an element that is block-like with my siblings and we're centered in a row.  </div>  <div>    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.  </div>  <div>    I'm an element that is block-like with my siblings and we're centered in a row.  </div></main>

body {  background: #f06d06;  font-size: 80%;}main {  background: white;  margin: 20px 0;  padding: 10px;}main div {  background: black;  color: white;  padding: 15px;  max-width: 125px;  margin: 5px;}.inline-block-center {  text-align: center;}.inline-block-center div {  display: inline-block;  text-align: left;}.flex-center {  display: flex;  justify-content: center;}

Vertical center:
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 there can be a processing method of 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 attributes of css3, which are not described in consideration of compatibility issues.

How to align the text in the css code in the vertical and vertical div, <div> horizontal vertical center </div>

A simple method is as follows:
Assume that your DIV is Px in height and PX in width. In this case, your text will be horizontally and vertically centered:
<Div style = "width: 1000px; height: 100px; text-align: center; line-height: 100px; border: blue solid 1px;">
Center horizontally and vertically
</Div>
CSS is like this. text-align: center means to center the text in the DIV horizontally, while line-height: 100px, the height of each line of text in the DIV is PX (the same as that of the DIV). In this way, the text is vertically centered. That is to say, if your DIV is PX high, you can make line-height: Px; the text will be vertically centered.
No. No, you can't.

How does css html align img labels horizontally and vertically in the center and horizontally in the center

Set text-align: center on the label where img is located.
If the center is vertical, set vertical-align: middle On the img.
As for horizontal vertical center? This problem already exists.
For example:
<Div style = "text-align: center; width: 100px; height: 40px;"> </div>