CSS sets div to center top and bottom

1. Line-height method

If there is only one line or a few words to be vertically centered, it is the simplest to make. Just make the line height of the text the same as the height of the container, for example:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

2. Simulation form method

Set the container to display:table, then set the child element, that is, the element to be vertically centered, to display:table-cell, and then add vertical-align:middle to achieve it.

The html structure is as follows:

<div id="wrapper">
    <div id="cell">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </div>
</div>

css code:

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}
#cell{display:table-cell; vertical-align:middle;}

Unfortunately, IE7 and below are not supported.
Click to send the link for more methods
Reprinted from: https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10407830.html