Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Заголовок документа</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>Центрирование контента</h2> <div class="flexbox-container"> <div class="flexbox-item fixed"> <div class="box"> <h2>Центрирован с помощью Flexbox</h2> <p contenteditable="true">Этот блок центрирован и по вертикали и по горизонтали. </p> </div> </div> </div> </body> </html>