Sparking Imaginative Learning
Your location: ASHBURN, VA Change
Closest location:
Mad Science of Washington Go
Mad Science of Hampton Roads Go
Your location: ASHBURN, VA  

Can't find your location? Contact the head office for help.
Sign up for our newsletter!
Follow us on:


This is a box centered on the page

You have to set some important styles on the box:

  • box-sizing: border-box;
    -this makes sure that the any border is included in the calculation of the width of the box
  • border: solid 1px black
    - optional, but this is an example of creating a border for that box: click here for reference
  • margin:auto;
    -sets the spacing on the left and right to be auto-calculated based on the width of this box compared to its container
  • width:500px
    -replace 500 with whatever size is appropriate
  • max-width:100%
    -this is SUPER important, otherwise, when switching to mobile mode where the maximum width is approx 316-320 px your box will go beyond and look horrible and/or just make it difficult for mobile users

Code sample:

Check out ourIn-Class Workshops
Mobile version | Privacy policy | Terms and conditions LEGO®, the LEGO® logo, the Minifigure, MINDSTORMS® and LEGOLAND® are trademarks of the LEGO® Group of companies which does not sponsor, authorize or endorse this site. Copyright © 2018 Mad Science Group Inc. - All rights reserved
8360 Bougainville Street, Suite 201, Montreal, Quebec, Canada, H4P 2G1