zoukankan      html  css  js  c++  java
  • CSS(九):设置盒子水平垂直居中

    通过设置下面的样式可以使盒子水平垂直居中:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
          div{
              height: 200px;
              width: 200px;
              background-color: red;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -100px;/*负数,数值是宽度的一半*/
              margin-top: -100px;/*负数,数值是高度的一半*/
          }
        </style>
    </head>
    <body>
        <div>
    
        </div>
    </body>
    </html>

     效果:

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>设置盒子水平垂直居中</title>
        <style type="text/css">
          *{
              margin: 0px;
              padding: 0px;
          }
          .bg{
              width: 100%;
              height: 100%;
              background: #000000;
              background: rgba(0, 0, 0, 0.5);
              background: #000000;
              filter: alpha(opacity=30);
              opacity: 0.3;
              position: absolute;
              left: 0px;
              top: 0px;
          }
          .opinion{
              width: 500px;
              height: 330px;
              border: 1px solid #666666;
              /* margin: 0px auto;设置DIV水平居中 */
              position: absolute;
              left: 50%;
              top: 50%;
              margin-left: -250px;
              margin-top: -165px;
              background: white;
          }
          .opinion h3{
              margin:15px;
              font-size: 16px;
          }
          .opinion span{
             color: green;
          }
          .opinion hr{
              margin: 15px;
          }
          .opinion em{
              float: right; /*向右浮动*/
              width: 21px;
              height: 20px;
              background: url(images/tb.gif) no-repeat;
          }
          .opinion p{
              margin: 15px;
              line-height: 25px;
              font-size: 15px;
          }
          .email,.content,.btnSubmit{
            display: block;
            margin: 15px;
          }
          .email,.content{
              width: 460px;
          }
          .email{
              height: 20px;
              line-height: 20px;
              padding-left: 5px;
          }
          .content{
              height: 100px;
              padding-left: 5px;
          }
          .btnSubmit{
              width: 60px;
              height: 25px;
              background: orangered;
              color: white;
              border: 0px;
              cursor: pointer;
          }
        </style>
    </head>
    <body>
        <div class="bg">
    
        </div>
        <div class="opinion">
            <h3>
                 <span>意见反馈</span>
                 <em class="cllse"></em>
            </h3>
            <hr />
            <p>
                亲爱的用户,欢迎来到gwiff,我们非常希望看到您对gwiff的看法,
                以便将来更好的服务到您。
            </p>
            <div>
                <form action="" method="POST" id="myForm">
                   <input type="text" class="email" name="email" />
                   <textarea class="content"></textarea>
                   <input type="button" value="提   交" class="btnSubmit"/>
                </form>
            </div>
        </div>
    
    </body>
    </html>

     效果:

  • 相关阅读:
    2016.5.30实现透明Panel及控件置顶的方法
    2016.6.14自定义控件添加自定义事件
    2016.5.30让窗口处于最顶层的方法
    2016.5.23 用反射技术为实体类变量赋值、取值
    2016.4.6 WinForm显示PDF两种方法
    2016.3.7 Word2007编号设置
    2016.2.28 DataTable用法汇总
    2016.2.24 利用用户控件和委托完美解决快速选择txbbox
    2016.2.13 (年初六) oracle两张表update方法
    怎样用idhttpserver代替IIS让用户浏览html或下载文件 http://bbs.csdn.net/topics/360248674
  • 原文地址:https://www.cnblogs.com/dotnet261010/p/9569628.html
Copyright © 2011-2022 走看看