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

<!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. 搭建MVC及WEB API项目框架时碰到的问题集合

    前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...

  2. 安装python 2.7条件下的pip环境

    wget https://pypi.python.org/packages/ff/d4/209f4939c49e31f5524fa0027bf1c8ec3107abaf7c61fdaad704a648 ...

  3. MySQL的体系结构图

    http://attachbak.dataguru.cn/attachments/forum/201408/30/231337wrbs3xpr5kbs3ryh.png

  4. 【凯子哥带你夯实应用层】使用ActionMode实现有删除动画的多选删除功能

        转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992      ActionMode是3.0之后.官方推荐的一种上下文菜单的实现方式,在之前一直用的是Co ...

  5. 【Unity】2.7 检视器（Inspector）

    分类:Unity.C#.VS2015 创建日期:2016-03-31 一.简介 Unity中的游戏是以包含网格.脚本.声音或灯光 (Lights) 等其他图形元素的多个游戏对象 (GameObject ...

  6. Linux学习笔记（九）

    <span style="font-size:18px;">本人使用的是centos 因为用使用些特殊命令.不得不改动系统的时间这里总结例如以下: date 查看系统时 ...

  7. HTML5学习笔记（十二）：JavaScript新增Map和Set

    Map JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaScript的对象有个小问题,就是键必须是字符串.但实际上Nu ...

  8. cmd命令操作Oracle数据库

    //注意cmd命令执行的密码字符不能过于复杂 不能带有特殊符号 以免执行不通过 譬如有!@#￥%……&*之类的  所以在Oracle数据库设置密码是不要太复杂 /String Database ...

  9. [DIOCP3/MyBean/QDAC开源项目] DataModule-DB例子基于MyBean的插件实例<三层数据库方案>

    [说明] 这个例子答应大家很久了,一直没有时间弄,现在正式结合MyBean插件可以很方便的在客户端共享操作连接,执行数据库的各项工作,屏蔽了底层的通信解码器编码等工作,直接传递Variant,给了开发 ...

  10. linux远程拷贝命令-scp

    因为某种原因需要远程一个CentOS主机,只能通过ssh访问并下载文件.搞了半天不知道怎么处理文件,比如上传和下载.那就学习下吧. 基本命令格式 由于使用ssh,登录之后的本机地址是不需要给出的.但是 ...