Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .flexbox-container { background: #cccccc; display: flex; align-items: center; -webkit-align-items: center; justify-content: center; height: auto; margin: 0; min-height: 500px; } .flexbox-item { max-height: 50%; background: #666666; font-size: 15px; } .fixed { flex: none; max-width: 50%; } .box { width: 100%; padding: 1em; background: #1c87c9; } </style> </head> <body> <h2>Centering Content</h2> <div class="flexbox-container"> <div class="flexbox-item fixed"> <div class="box"> <h2>Centered by Flexbox</h2> <p contenteditable="true">This box is both centered vertically and horizontally. </p> </div> </div> </div> </body> </html>