[notes] summarize common horizontal and vertical centering methods

When reviewing the horizontal and vertical center, I found that I had forgotten

So write a note and write it down

As long as it involves CSS There is no way around the positioning problem , Especially when the box is centered . Centring is divided into horizontal centring and vertical centring , There are several ways to do this , I'll list them one by one .

Horizontal center

1. inline Elements ：text-align: center
2. block Elements ：margin: 0 auto
3. absolute Elements ：left: 50% + margin-left negative ( The value is half the width of the element )
4. absolute Elements ：left: 50% + transform: translateX（-50%)

Vertical center

1. inline Elements ：line-height The value is equal to the height value
2. absolute Elements ：top：50%+margin-top negative ( The value is half the height of the element )
3. absolute Elements ：top：50%+transform: translateY（-50%)
4. absolute Elements ： Have a fixed width and height +top,left,bottom,right=0 + margin:auto

Horizontal vertical center

Is the above level in the middle + Vertically centered together
Here are some common examples ：

1. Positioning yes relative Inside the box absolute The box ：
   top: 50%;left: 50%;transform: translate(-50%,-50%);
   

2. Know the width and height of the box
   top: 50%;left: 50%;
   add
   margin-left negative ( The value is half the width of the element );margin-top negative ( The value is half the height of the element )
   
   

3. Positioning yes relative Inside the box absolute The box has a fixed width and height ：
   top,left,bottom,right=0 + margin:auto
   
   

4. CSS3 Elastic layout （flex）
   If you use CSS3 Flexible layout （flex） Words , The problem will become much easier . Use CSS3 The flexible layout of is very simple , Just set the parent element to
   display:flex // flex Layout
   align-items:center;// The elements are horizontally centered
   justify-content:center;// The elements are centered vertically

You are welcome to ask questions in the comment area

If you think the article is helpful to you, you might as well like it before you go ~