Center HTML element Display

Center HTML element Display

• Margin

<style= "margin:300px auto,background-color:red,width:100px,height:100px"  ></div>

Centered relative to the parent element, the upper and lower distances need to be calculated

PS: When setting a parameter for margin represents the upper and lower left and right; two up and down \ about; three up \ about \ down.

The margin of the top and bottom two adjacent elements overrides each other to the maximum value, and the left or right does not overlap

<style= "Margin:auto;background-color:red;width:100px;height:100px;position: absolute;top:0;left:0;right:0;bottom:0 "></div>

From the parent up or down to zero, Margin:auto

• Position:absolute Absolute Positioning

<style= "Background-color:red;width:100px;height:100px;position:absolute;top : 50%;left:50% "></div>

The upper-left corner of the element is centered on its parent element

Center HTML element Display