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

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

效果：

CSS（九）：设置盒子水平垂直居中的更多相关文章

  1. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  2. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  3. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  4. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  5. CSS中怎么设置元素水平垂直居中？

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  6. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

  7. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  8. 使用CSS定位元素实现水平垂直居中效果

    总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...

  9. 用css让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

随机推荐

  1. appium通过同级别(兄弟关系)元素找到元素

    在做appium测试用例的时候,要获取金额值,用uiautomatorviewer查看该元素,该元素没有特别明显的个性特点,唯一有特点的定位是有content-desc值,但是该值是变动的,所以无法通 ...

  2. linux 免密码登录

    linux 免密码登录 配置 test 为本地linux 192.168.1.70 为远程linux [root@test:/home/root]$ssh-keygenGenerating publi ...

  3. react-native react-navigation使用

    npm install react-navigation --save 安装 代码中引入StackNavigator组件   5CF902D1-9639-494D-8775-A9A87F376734. ...

  4. xocodebulid 自动化打包 解决提示 ld: library not found for -lPods 问题

    如果你的项目用到cocopod 第三方库.使用xcodebulid 估计会出现 ld: library not found for -lPods 以下 是我的解决办法 xcodebuild -work ...

  5. wget常见用法

    1.很多软件官网会有安装脚本,并把脚本搞成raw模式,方便下载后直接运行的shell文件.比如docker wget -qO- get.docker.com | bash -q的含义是:--quiet ...

  6. shiro 自定义过滤器，拦截过期session的请求，并且以ajax形式返回

    自定义过滤器: public class CustomFormAuthenticationFilter extends FormAuthenticationFilter { @Override pro ...

  7. confluence数据库的配置文件

    mysql> select u.id,u.user_name,u.active from cwd_user u join cwd_membership m on u.id=m.child_use ...

  8. FFmpeg(4)-使用avformat_find_stream_info()来探测获取封装格式的上下文信息

    /** * Read packets of a media file to get stream information. This * is useful for file formats with ...

  9. Flink源码分析

    http://vinoyang.com/ http://wuchong.me Apache Flink源码解析之stream-source https://yq.aliyun.com/articles ...

  10. burpsuite扩展集成sqlmap插件

    通常我们在使用sqlmap测试SQL注入问题的时候会先使用burpsuite来抓包,然后交给sqlmap进行扫描,此操作略显繁琐. 为了避免这种繁琐的重复操作可以将sqlmap以插件的方式集成到bur ...