Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the methods of CSS centralization". In daily operation, I believe that many people have doubts about the method of CSS centralization. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what is the method of CSS centralization?" Next, please follow the editor to study!

Horizontal center

1. Inline element

To center inline elements such as links, span, or img, using text-align: center is sufficient.

.desk {text-align: center;}

For multiple inline elements, you can also use text-align:center:

.desk {text-align: center;}

2. Flexbox

Using flexbox, you can also quickly center elements:

.desk {display: flex; justify-content: center;}

It can also work properly for multiple inline projects.

CSS Grid

When using a grid container, the plate in the figure is centered according to its grid area. Note that this will not apply to multiple plates unless they are wrapped in a single element.

.desk {display: grid; justify-content: center;}

Block element

1. Auto Margin

Block elements with known widths and heights can be centered by setting margin-left:auto and margin-right:auto.

.plate {width: 120px; height: 120px; margin-left: auto; margin-right: auto;}

For multiple block elements, they should be wrapped in an element and then centered on the parent element.

.tray {display: flex; margin-left: auto; margin-right: auto;}

2. Flexbox

For flexbox, you also use justify-content:center to center the element:

.desk {display: flex; justify-content: center;}

For multiple elements, we don't need to wrap them in a single element, flexbox can center them all.

CSS positioning

With absolute positioning, we can easily center it horizontally through CSS transform.

.plate {position: absolute; left: 50%; transform: translateX (- 50%);}

When the width of the element is known, you can use negative margins instead of CSS transform.

.plate {position: absolute; left: 50%; margin-left:-60px;}

Vertical center

1. Inline element

Vertical Padding

One of the easiest ways to center elements vertically is to use padding:

Padding-top: 24px; padding-bottom: 24px;}

2. Vertical Align

The vertical-align attribute can be used for one or more elements.

In this example, the fork and knife should be centered perpendicular to the table.

.desk {text-align: center;} .plate, .fork, .knife {vertical-align: middle;}

3. Flexbox

To align plates, forks, and knives, we can use flexbox:

.desk {display: flex; justify-content: center; align-items: center;}

Block element

1. Absolute positioning

By absolutely positioning the element, you can center the element vertically using CSS transform:

.plate {position: absolute; top: 50%; transform: translateY (- 50%);}

If you know the height of the element, you can use negative margins instead of transform.

.plate {position: absolute; top: 50%; margin-top:-60px;}

2. CSS Grid

Using the CSS grid, we can use align-items to center the project perpendicular to its grid area.

.desk {display: grid; align-items: center;}

Horizontal and vertical center

Inline element

Padding and Text Align

.plate {text-align: center; padding-top: 24px; padding-bottom: 24px;}

Other element types

1. Absolute positioning

.plate {position: absolute; left: 50%; top: 50%; transform: translate (- 50%);}

2. Flexbox

Elements can be centered vertically and horizontally with justify-content:center and align-items:center:

.plate {display: flex; justify-content: center; align-items: center;}

CSS Grid

It can be passed through the place-items attribute, which combines justify-content and align-items:

Desk {display: grid; place-items: center;} at this point, the study of "what are the ways to center CSS" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.