CSS implements element centering

CSS element centered

1. Center Horizontally

1) Horizontal centering of elements in text, picture and other lines

Adds a Text-align:center property to the parent block element.

2) determines the horizontal center of the block-level element of the width (note must be inside the block element)

By setting Margin-left:auto and Margin-right:auto to achieve

3) Horizontal center of the block element with indeterminate width

(1) Change the block element of the indeterminate width to Display:inline, and set the Text-align:center for its peripheral block parent element

(2) Set parent element position:relative,left:50%, child element set to Position:relative and left:-50%.

2, Vertical Center

1) parent element height indeterminate single text, picture, block-level element vertically centered

Implemented by setting the same upper and lower padding for the parent element

2) Vertical center of a single line of text that is determined by the parent element height

Sets the line-height for the parent element, which is the height of the line-height equal to the determined height of the parent element

3) Vertical centering of multi-line text, picture, block elements with height determination of the parent element

In the case of vertical centering, there is an attribute vertical-align in the CSS, but only if the parent element is TD or TH, the element is valid, the property is not supported by default for other block elements p,div, and (1) The parent element Dispaly:table-cell is set. However, this property differs from browser support. (2) The content is placed in a row of a column of table, TD label default set Vertical-align:middle.

For the vertical and horizontal center of the various situations, you can refer to the MU-class network

CSS implements element centering