Created
March 8, 2013 18:11
-
-
Save rtircher/5118523 to your computer and use it in GitHub Desktop.
Center a div vertically and horizontally
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .table { | |
| display: table; | |
| } | |
| .center-vertically { | |
| display: table-cell; | |
| vertical-align: middle; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .center-horizontally { | |
| margin: 0 auto; | |
| } | |
| .div-styling { | |
| width: 75%; | |
| height: 75%; | |
| } | |
| /* These two are just to show the divs on the page */ | |
| .red { | |
| background-color: red; | |
| } | |
| .green { | |
| background-color: green; | |
| } | |
| /* The following is just to ensure the outermost div takes 100% of the height and width | |
| * However, this should be part of a reset.css | |
| */ | |
| html, body, .table { | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100%; | |
| width: 100%; | |
| height: 100%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link href='div-vertical-horizontal-center.css' rel='stylesheet' type='text/css' /> | |
| </head> | |
| <body> | |
| <div class='table' /> | |
| <div class='center-vertically green'> | |
| <div class='center-horizontally div-styling red'></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment