How to set a div to be horizontally centered with CSS

How to set the horizontal centering of divs with CSS: 1. Set the "margin: 0 auto" style to the div element; 2. Set the "text-align: center" style in the parent div element, at the child level Set the "display: inline-block" style in the div element.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Adaptive margins

Method:Element binding attributes:margin: 0 auto;

Effect:

Note:Commonly used, suitable for known parent element width Situation

2. Inline block element

Method:Parent element setting attribute:text-align: center;

     Set attributes for sub-level elements:display: inline-block;

The effect is as shown:

Note:Inline-block has browser compatibility issues, and the side effects caused by setting inline-block will be dealt with separately.

Supplement: Use positioning

Method:Parent element setting attribute:position: relative;

##1 -level element setting attributes:posity: absolute;

effect As shown

Applicable to situations where the width of the parent element is known. It is troublesome to set the center positioning yourself.

css video tutorial】

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