div的垂直居中 - dzxczx-html教程-PHP中文网

div的垂直居中 - dzxczx

php中文网

发布： 2016-05-21 08:54:49

原创

1499人浏览过

之前一直不会垂直居中，看了一篇文章才知道原地址不详了..

<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> }

登录后复制

第一次写博客不好之处大家见谅有更好的方法或者错误欢迎指出。

同徽B2B电子商务软件 V46

同徽B2B电子商务软件是国内第一个基于J2EE架构的电子商务商业程序，在国内同类软件中市场占有率位居第一。目前客户分布二十多个省份，三十几个行业，直接和间接服务500万企业,其中包括多家部级单位和世界500强企业：商务部、农业部、德赛集团、宝钢集团、江苏龙华集团、深圳中农股份、中集集团等。。网站参数管理运营商可对整个网站进行灵活的配置，适应不同的运营需求网站更新将信息生成静态页面，加快浏览速