Aprenda a crear una pantalla dividida (50/50) con CSS.

HTML<div class="split left"> <div class="centered"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXcDDxGj7WnUnxK3AMpz5AsKX7mb7TbMC4L55ivP7D3F02g1tNescL8C5aOjZxowt_OYp3RNQZ3T6rnsQpKl5Q0zAaVtsZigwr1OaKicTiDTRB7_HU1713gHMKqZmImF768amlWIECsIfe/s0/document-1.png"> <h2>Diseño y desarrollo web</h2> <p>Webgae crea cualquier tipo de sitio web.</p> </div> </div> <div class="split right"> <div class="centered"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEjR4QV4FmBAiyWZjXhLpKhJIwsglglVUGdmknem1iuzeVC8DoT1T1IwqLJNWLw8n2URVsOWgMrbqWac94Q3Mpt4FQgiH2J7CTyczFiLAIxjFhxhuVTDJaKrv42EMnMVaG3txnG4UU3uFXHdPckRPmqR_afGofw8Q2kghXmuaVL2UBGW4P7JtggG5EDtTA"> <h2>Diseñador y desarrollador Web</h2> <p>Somos expertos en la web. Un equipo de diseñadores y desarrolladores, especialistas en marketing y estrategas que identifican problemas y brindan soluciones. </p> </div> </div>

CSS .split { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; } .left { left: 0; background-color: #eeeeee; } .right { right: 0; background-color: #c2c2c2; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .centered img { width: 150px; border-radius: 50%; }

JavaScript

Puede cambiar código para ver el resultado

Resultado ↓