Jithin Das

How to center a <div> without FlexBox or CSS Grid.

Step 1: For the container you want to centre horizontally, Make sure you specify a width property. (This way a block element will not try to fill up the entire space and instead will be confined to the width it is provided.)

Step 2: Set it's margin-left and margin-right as auto. This will distribute whatever spacing left equally with both the left and right margins.

code sample:

.container {
  width: 900px;
  margin: 0 auto;