你的位置:首页 > 软件开发 > 网页设计 > CSS实现水平垂直居中方式

CSS实现水平垂直居中方式

发布时间:2017-07-24 12:00:28
1、定位核心代码实现请看示例代码中的注释:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> < ...

CSS实现水平垂直居中方式

1、定位

核心代码实现请看示例代码中的注释:

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>CSS水平垂直居中实现方式--定位实现</title>    <style type="text/css">      *{        margin: 0;        padding: 0;        }      .p{        /*父元素为除了static以外的定位方式*/        position: relative;        /*position: absolute;*/        /*position: fixed;*/        width: 500px;        height: 500px;        border: 1px solid red;      }      .c{        /*子元素为绝对定位*/        position: absolute;        width: 200px;        height: 200px;        /*top、bottom、left和right 均设置为0*/        top: 0;        bottom: 0;        left: 0;        right: 0;        /*margin设置为auto*/        margin:auto;        border: 1px solid green;        }    </style>  </head>  <body>    <div class="p">      <div class="c">        子元素      </div>    </div>      </body></html>

原标题:CSS实现水平垂直居中方式

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。