エレメント水平垂直方向中央小結
5084 ワード
tableメソッド:
移動方法:
bodyで中央:
<
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
>