エレメント水平垂直方向中央小結


tableメソッド:
 

  
    
< body >
< div style ="display: table; border: 1px solid red; width: 800px; height: 800px;" >
< div style ="display: table-cell; vertical-align: middle; margin: 0 auto" >
< div style ="border: 1px solid orange; width: 500px; height: 500px; margin: 0 auto;" >
</ div >
</ div >
</ div >
</ body >

 
 
移動方法:
 

  
    
< div id ="div1" style ="width: 500px; height: 500px; border: 1px solid #f00; position: relative;" >
< div id ="div2" style ="width: 200px; height: 200px; border: 1px solid #000; position: absolute;
top: 50%; left: 50%; margin: -100px 0 0 -100px;"
>
</ div >
</ div >

 
bodyで中央:

  
    
< body >
< div style ="border:1px red solid; width:100px; height:100px; top: 50%; left: 50%; position: absolute; margin: -50px 0 0 -50px;" ></ div >
</ body >