The method of horizontal centering of elements in HTML

This article introduces the relevant knowledge of "the method of centring the level of elements in the HTML line". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First of all, let's see if its parent element is a block-level element. If so, set text-align: center directly to the parent element

If not, set its parent element to the block level first, and then set text-align: center to the parent element

Block-level elements are centered horizontally (fixed width):

1) set margin: 0 auto; to anyone who needs to center (function: to center the box itself)

2) first set the parent element to relative positioning, then set the child element to absolute positioning, and set the left:50%, of the child element to center the upper left corner of the child element horizontally.

Set the margin-left of the absolute child element:-half the width of the element px; or set transform: translateX (- 50%)

Block-level elements are centered horizontally (no width):

1) the default child element has the same width as the parent element. In this case, you need to set the child element to display: inline-block; or display: inline; to convert it to inline block level / inline element, and set text-align: center to the parent element.

2) first set the parent element to relative positioning, then set the child element to absolute positioning, and set the left:50%, of the child element to center the upper left corner of the child element horizontally.

Take advantage of the new attribute transform: translateX (- 50%) of css3

Use the flexbox layout to center horizontally (with varying widths):

Using the flexbox layout, you only need to add the attribute display: flex; justify-content: center to the parent element of the block element to be processed

The inline elements of a single line are vertically centered:

You only need to set the line height of the element in a single line to be equal to the height of the box.

Multi-line inline elements are vertically centered:

Use to set the display:table-cell; and vertical-align: middle; attributes for the parent element

Block-level element vertical center method 1: use positioning

First, set the parent element to relative positioning, then set the child element to absolute positioning, and set the top: 50% of the child element, that is, to center the upper left corner of the child element vertically.

Set height: set margin-top:-half of the height of the absolute child element px; or set transform: translateY (- 50%)

Variable height: use css3 to add attribute transform: translateY (- 50%)

The second method of vertical centering of block-level elements is to use flexbox layout (height can be varied)

Using the flexbox layout, you only need to add the attribute display: flex; align-items: center to the parent element of the block element to be processed

Horizontal and vertical center-elements of known height and width:

Method 1:

Set the parent element to relative positioning, and set absolute positioning for child elements, top: 0; right: 0; bottom: 0; left: 0; margin: auto

Method 2:

Set the parent element to relative positioning, and set absolute positioning for child elements, left: 50%; top: 50%; margin-left:-- half the width of the element px; margin-top:-- half the height of the element px

This is the end of the content of "horizontal centralization of elements in the HTML line". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!