总结：HTML 元素居中

horizontal middle

============

1.text-align:center

<div style="text-align:center">

<div style="display:inline-block;">text</div>

</div>

2.margin:0 auto;

If we know the width of the inner div, then we can use margin auto

<div style="width:300px;">

<div style="margin: 0 auto;width:100px;">text</div>

</div>

3.table cell

<div style="display:table-cell;vertical-align:center">

<div>text</div>

</div>

vertical middle

=========

if we know the height of the parent, then we can set the line-height to be the same height of the div

<div style="height:30px;line-height:30px">

<div style="display:inline-block;">text</div>

</div>

if we know the height of the inner div, then we can use margin auto

<div style="height:300px;">

<div style="margin: auto 0;height:100px;">text</div>

</div>

both vertical and horizontal middle

===========

position:absolute

position:absolute

position: relative;

<div style="position: relative; height: 400px; width: 400px;">

<div style="border: 1px solid ; overflow: hidden; position: absolute; width: 100%; height: 100%;">

<!-- need to calculate the height -->

<div style="position: absolute; top: 50%; left: 50%; height: 3em;">

<div style="border: 1px solid ; top: -50%; left: -50%; position: relative;"> content fffffffffffffff sdfsfs sdfs sfsf sf ssd </div>

</div>

</div>

</div>