How to set a div to be centered in css

The way to set a div to be centered in css is to set the positioning, such as [position:absolute;] or [margin:auto;]. When we need to fully consider browser compatibility, we can use the Flex layout method.

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

To set the div to be centered in css, we can achieve it through the following methods.

Positioning method: position:absolute

If the child div has a defined width and height, you can use this method. Note: The values ​​of margin-top and margin-left are half of the height and width values. You can try it and see the effect.

margin:auto method

This can also be a positioning method. Using this method requires that the child div must be set to a width value, otherwise it will have no effect~margin:auto is centered horizontally and vertically. If you only set the horizontal centering, you can set it to margin:auto 0; similarly, if you only set the vertical centering, Can be set to margin:0 auto

display:table-cell method

This method is mainly used for vertical center alignment of multi-line text content. Note: text-align:center sets the horizontal center alignment of the text, and vertical-align:middle sets the vertical center alignment.

transform:translate(x,y) method

This is a new attribute in css3. It can be used if the child element does not set the width and height values. Use this method to achieve it. This can be used when we make adaptive pages.

before, after pseudo-element method

This also centers the child elements vertically. If you still want to center it horizontally, you can use several other methods to achieve it, such as setting margin: 0 auto for the child elements; this will center it both horizontally and vertically.

Flex layout method

This method should fully consider the compatibility of the browser. Elements that need to be vertically centered do not need to set width and height values, and can be used in adaptive pages to achieve horizontal and vertical centering.

Related video recommendations: css video tutorial

The above is the detailed content of How to set a div to be centered in css. For more information, please follow other related articles on the PHP Chinese website!