In this blog, we’ll discuss a technique that’s ideal for responsive theming: Making two blocks that occupy the same region horizontally center perfectly without margins. We will be styling our block in the corresponding style sheet using the correct selectors that the block has or has been given by you. Using the style below, we will learn how to center your blocks in the desired region without using large margins. This is good for making both blocks perfectly center--not just what looks centered--while also setting up a base for responsive theming.

Code: CSS

          .some-region #block-1 {

           width: 50%;

           margin: 0 auto

           }

          .some-region #block-2 {

          width: 50%;

          margin: 0 auto;

          }

Remember, any % can be used to adjust where in the region the block is placed, although it will only adjust it horizontally. By placing the width of both blocks at 50%, we adjust both blocks to take up equal space horizontally. By adjusting the margin (margin: 0 auto;), we pull them perfectly to the center of their region.