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

This article mainly introduces the CSS element center method has what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you read this CSS element center method which article will have a harvest, let's take a look at it.

# horizontal center of inline elements

The way to center an inline element horizontally in css is to add a

Text-align: center

The style is fine.

# inline elements are vertically centered

The way to center an inline element vertically in css is to add a line-height style to its parent element, and when the value of line-height equals the height of the parent element, the element is centered vertically.

# Block level elements are horizontally centered

To center block-level elements horizontally, add

Margin: 0 auto

The style can be done or written as

Margin-left: auto

Margin-right: auto

# Block-level elements are vertically centered

Block-level elements are centered vertically, and there is no ready-made method to use in css, but the omnipotent position style can do it, like this:

Position: absolute

Top: 50%

Transform: translateY (- 50%)

You can center the block-level element vertically, but note that you need to set the position value of the parent element of the block-level element to relative, like this:

Position:relative

# Block-level elements are centered vertically and horizontally

If you need to set the block-level element to be centered horizontally and vertically, do this:

Position: absolute

Top: 50%

Left: 50%

Transform: translateX (- 50) translateY (- 50)

Then, you also need to set the position value of the parent element of this block-level element to relative, like this:

Position:relative

This is the end of the article on "what are the ways to center CSS elements?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what is the method of centering CSS elements". If you want to learn more, you are welcome to follow the industry information channel.

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.