En este estilo, vamos a aprender cómo hacer un centro interior DIV interior exterior DIV. En general, una Div interior no puede ser central en el interior exterior Div pero utilizando unos parámetros que puede hacer que sea centro.
Fragmento de código CSS – Hacer Interior DIV Centro interior exterior DIV
CSS
<style>
.outerDiv
{
background-color: #006699;
color: #fff;
height: 200px;
width: 200px;
margin: 0px auto;
}
.innerDiv
{
background-color: #efefef;
color: #000;
height: 150px;
width: 150px;
margin: 0px auto;
}
</style>
Código fuente HTML con CSS
<!--CSS - Make Inner DIV center inside Outer DIV.-->
<html>
<head>
<title>CSS - Make Inner DIV center inside Outer DIV.</title>
<!--Example CSS-->
<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
<style>
.outerDiv
{
background-color: #006699;
color: #fff;
height: 200px;
width: 200px;
margin: 0px auto;
}
.innerDiv
{
background-color: #efefef;
color: #000;
height: 150px;
width: 150px;
margin: 0px auto;
}
</style>
</head>
<body style="text-align: center;">
<h1>CSS - Make Inner DIV center inside Outer DIV.</h1>
<div class="outerDiv">
This is Outer DIV.
<div class="innerDiv">
This is Innder DIV.
</div>
</div>
</body>
</html>
Resultado
clic for DEMO y rarr;