Please summarize the expert, everybody to learn,

CodePudding user response:

Commonly used text - align: center and margin: 0 auto, the justify - content: center
To realize the position or orientation

CodePudding user response:

Around the center alignment can locate and transform mobile!
/* the first way to locate + margin
Left in the top percentage relative to the parent tag wide high percentage of
Defect: must know pictures of wide high

*/
/* # wrap img {
width: 200px;
height: 300px;
position: absolute; */
Centered on the upper left corner */*/
/* left: 50%;
Top: 50%; */
Move half wide high/* */
/* margin - left: - 100 px;
Margin - top: - 150 px;
} */


/* second way: positioning and mobile
Mobile two values, translation size of the x axis and y axis of the translational size if you use a percentage, relative to the label of wide high
*/
/* # wrap img {
position: absolute;
left: 50%;
Top: 50%;
The transform: translate (50%, 50%);
} */

CodePudding user response:

Advice about middle and baidu directly, the methods in the baidu can directly and checking

CodePudding user response:

Text:
Horizontal center: text - align: center;
Single-line text vertical center: container height=line - height
Box:
1. Horizontal center: margin: 0 auto;
2. The parent element: the position: relative;
Child elements: position: absolute; Top: 50%; left:50%; Margin - left: - (child element width/2); Margin - top: - (child element height/2);
3. Parent: position: relative;
Child elements: position: absolute; Top: 50%; left:50%; The transform: translate (50%, 50%);
4. The parent element: display: flex; The justify - content: center; The align - items: center;

CodePudding user response:

Level in the method have block elements margin: 0 auto
Inline elements text - align: center
Methods on the vertical level in
1. The block element method one: use absolute positioning, now need to add to their parent element position: relative; After positioning set top, left is 50%, then the margin - top, margin - left the value of the half the width of its elements themselves, (applicable to wide high elements known)
2. Block element method 2: use absolute positioning, the need to add to their parent element position: relative; After positioning set top: 0; Bottom: 0; left:0; right:0; Margin: auto; (unknown wide high element applies)
3. The block element method three: use absolute positioning, now need to add to their parent element position: relative; After positioning set top: 50%; Left: 50%; The transform: translate (50%, 50%); (also comfortable with unknown wide high elements)
4. Line element text - align: center; height:50px; The line - height: 50 px; (to give way and highly consistent, can let the text vertical center)

CodePudding user response:

https://www.cnblogs.com/dreamperson/p/9367008.html try flax layout

CodePudding user response:

Vertical - align: middle
The text - align: center

CodePudding user response:

The text - align: center

CodePudding user response:

For text, the text - align: center,
For the container, you can use from the outside, margin: 0 auto;
Container words also can directly use absolute positioning, position: absolutel;
Top: 50%;
left:50%;