ホームページ > 記事 > ウェブフロントエンド > div的垂直居中 - dzxczx
div的垂直居中 - dzxczx
- WBOYオリジナル
- 2016-05-21 08:54:491255ブラウズ
之前一直不会垂直居中，看了一篇文章才知道 原地址 不详了..
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.diva</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">green</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;"> top</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;"> right</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;"> bottom</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">auto</span>;
<span style="color: #008080;">11</span> }
<span style="color: #008080;">12</span> <span style="color: #800000;">这是一种垂直居中的方式。
</span><span style="color: #008080;">13</span>
<span style="color: #008080;">14</span> <span style="color: #800000;">第二种兼容比较好
</span><span style="color: #008080;">15</span>
<span style="color: #008080;">16</span> <span style="color: #800000;">.divb</span>{
<span style="color: #008080;">17</span> <span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">red</span>;
<span style="color: #008080;">20</span> <span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">21</span> <span style="color: #ff0000;"> top</span>:<span style="color: #0000ff;">50%</span>;
<span style="color: #008080;">22</span> <span style="color: #ff0000;"> right</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">23</span> <span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">24</span> <span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">auto</span>;
<span style="color: #008080;">25</span> <span style="color: #ff0000;"> margin-top</span>:<span style="color: #0000ff;">-150px</span>;<span style="color: #ff0000;">//一半的高度
</span><span style="color: #008080;">26</span> }
第一次写博客 不好之处大家见谅 有更好的方法或者错误欢迎指出。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。