[SOLUCIONADO] Dividir pantalla en 4 y ademas un div en el centro

Cedyk · #1 (**permalink**) 28/04/2014, 19:42

Buenas tardes-noches a todos los lectores vengo aqui con una duda sobre el posicionamiento del ultimo div para una intro que estoy generando.
La idea es que el DIV 5, quedase centrado en el medio de la pantalla pero no tengo idea donde estoy pifiando. Agradeceria quien pudiera darme una mano, muchas Gracias!

Aqui dejo el código para que no tengan que adivinar que tengo:

Código:

<html>
<head>
  <title>Intro</title>
</head>
<body>
<style type="text/css">
body, html { height:100%; 
  margin:0; 
  padding:0;
  width:100%; 
  background-color:silver;
  text-align: center;
  }

#envoldura {
  border:1px solid black;
  width:99%;
  height:99%;    
  margin:auto;     
  text-align:center;
  font-size:300%;
}

#uno {
  border:1px solid black;
  width:49%;
  display:inline-block;     
  margin:auto;     
  height:49%;    
  background-color:red;
}

#dos {
  border:1px solid black;
  width:49%;
  display:inline-block;
  height:49%;    
  background-color:blue
}

#tres {
  border:1px solid black;
  width:49%;
  display:inline-block;
  height:49%;    
  background-color:green;
}

#cuatro {
  border:1px solid black;
  width:49%;
  display:inline-block;
  height:49%;    
  background-color:yellow;
}

#cinco {
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  margin-top:30px;
  left:0;
  right:0;
  width:200px;
  height:200px;
  background-color:cyan;
  border: 1px solid black;
}
</style>
    <div id="envoltura"></div>
    <div id="uno">DIV 1</div>
    <div id="dos">DIV 2</div>
    <div id="tres">DIV 3</div>
    <div id="cuatro">DIV 4</div>
    <div id="cinco">DIV 5</div>
</body>
</html>

Alexis88 · #2 (**permalink**) 28/04/2014, 21:01

Prueba aplicando un margen superior e izquierdo equivalente a la mitad del alto y ancho, respectivamente, pero en cantidades negativas, mientras que al top y left, dales el 50%, de este modo, se centrará el <div>.

Código CSS:

Ver original#cinco{
  width: 200px;
  height: 200px;
  position: fixed;
  margin: -100px 0 0 -100px;
  background: cyan;
  top: 50%;
  left: 50%;
  border: 1px solid black;
}

Saludos

Cedyk · #3 (**permalink**) 28/04/2014, 21:21

Es justo lo que necesitaba. Te agradezco mucho!.