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;
}