实例1:
.div2
{
position: relative;
width: 400px;
height: 400px;
background-color: Red;
}
.innerDiv
{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
<div class="div2" >
<input id="Button1" class="innerDiv" type="button" value="button" style=" height:200px; width:200px;" />
</div>
实例2:一定要写 ,不然不会居中了。
.div1
{
margin-left: auto;
margin-right: auto;
width: 400px;
vertical-align: middle;
text-align: center;
height: 400px;
line-height: 400px;
background-color: Yellow;
}
<div class="div1" >
<input id="Button1" type="button" value="button" style=" height:200px; width:200px;" />
</div>
实例3:
.div3
{
display:table;
width:400px;
height:400px;
background-color:Blue;
}
.innerdiv3
{
display:table-cell;
vertical-align:middle;
text-align:center;
}
<div class="div3" >
<div class="innerdiv3">
<input id="Button1" type="button" value="button" style=" height:200px; width:200px;" />
</div>
</div>
实例4:
.div4
{
position:relative;
width:400px;
height:400px;
background-color:Gray;
text-align:center;
}
.innerdiv4
{
position:absolute;
top:50%;
left:50%;
}
.btn
{
position:relative;
top:-100px;
left:-100px;
color:Red;
}
<div class="div4" >
<div class="innerdiv4">
<input id="Button1" class="btn" type="button" value="button" style=" height:200px; width:200px;" />
</div>
</div>