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

This article mainly explains "what does margin:auto refer to in css". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what does margin:auto mean in css"?

What does auto do first of all?

Define auto elements, depending on element type and context. In margins, auto can represent two situations: occupation of available space or 0px. These two will define different layouts for the element.

"automatic" occupies available space

This is the most common use we use of auto. By allocating the left and right margins of the auto elements, they can equally occupy the available horizontal space in the element container-so the element will be centered.

# inner {

Margin:auto

Width:250px

Height:125px

Background-image:linear-gradient (45 degmending 84ECEF10% memoir F8F62F60% repartee FDC018)

}

# outer {

Height:500px

Width:500px

Background:#1F1D20

Background-image:linear-gradient (# 7575751px transparent1px), linear-gradient (90degrecovery7575751pxtransparent1px)

Background-size:25px25px

}

However, this only applies to horizontal margins, it does not apply to floating and inline elements, and it itself cannot be used for absolute and fixed positioning elements.

Recommendation manual: CSS online manual

Since the left and right margins of auto occupy the "available" space evenly, what do you think will happen when you auto gives only one of them?

The left or right margin auto will occupy all the "available" space, making it look as if the element is offset to the right or left.

# inner {

Margin-right:auto

Width:250px

Height:125px

Background-image:linear-gradient (45 degmending 84ECEF10% memoir F8F62F60% repartee FDC018)

}

# outer {

Height:500px

Width:500px

Background:#1F1D20

Background-image:linear-gradient (# 7575751px transparent1px), linear-gradient (90degrecovery7575751pxtransparent1px)

Background-size:25px25px

}

At this point, I believe you have a deeper understanding of "what margin:auto refers to in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.