Common front-end style 1.0 (centered, two divs side by side)

Centered horizontally and vertically

1. Position the element so that it is centered (the method of using positioning and transform translation does not need to be written)

Add the following styles to the parent of the centered element:

Reason: When setting absolute positioning for an element, it is necessary to set non-static positioning for the parent

position: relative;

 

Add the following styles to the centered element:

Note: If you do not set the width and height for the centered element, the element will have the same width and height as the parent with non-static positioning (if not, it will be an html element).

width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: car;

 

We can use the above positioning method to make an element have the same width and height as the display area of ​​the browser page. The specific method is as follows:

Set the width and height of html elements:

width: 100%;
height: 100%;

 

Set the style of this element as follows (do not set non-static positioning for elements between this element and the html element):

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

 

2. Set the elastic layout to center the child elements in two ways

Method 1: Set the following styles for the parent of the centered element:

width: 400px;
height: 400px;
display: flex;

 

Add the following styles to the centered element:

margin: car;

 

Method 2: Set the following styles for the parent of the centered element:

display: flex;
align-items: center;
justify-content: center;

 

vertical center

 Centering with row height

Set the following styles for the centered element parent:

This method can set vertical centering for text and line elements within the element

line-height: 50px;

 

center horizontally

 1. Use margin to achieve centering

Add the following styles to the centered element:

Must set width for centered elements

width: 200px;
margin: car;

 

2. Use the text-align style to center

 Add the following styles to the centered element parent:

This method can set vertical centering for text and line elements within the element

text-align: center;

 

 

1. Open the html page to define a large div and two small divs as shown in the figure

   

2. The first method is our most commonly used float float, as long as the width of the two small divs is less than or equal to the width of the large div, they can be side by side

   

3. The second method is to use position for absolute positioning, and then use margin-left to remove the width of the first small div

   

4. This method is also commonly used, but it seems that the ie7 browser is not supported. Use the table box to realize divs side by side. This is equal width.

   

5. As shown in the figure, this is the result of the above three methods running, and you can see that the two divs are side by side

   

6. Another way to introduce here is to use display: inline (set div as inline) to achieve side-by-side effect

   

7. I added characters to two small divs, and the effect is as shown in the figure. If such a layout is needed in the project, this method is still good. The above three methods are recommended.

   

 

 

original:

https://www.cnblogs.com/zhangdongya/p/11238763.html