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

<!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. Macos mysql 8.0.11 添加配置文件

    mac 安装mysql 后,没有配置文件,如果需要添加配置文件,需要在/etc 目录下面添加 my.cnf 文件. 添加方法 打开文件命令:sudo vi  /etc/my.cnf 文件添加内容: [ ...

  2. Java 在给定路径上创建文件，所在文件夹不存在时，如何正确创建。

    String strPath = "E:\\a\\aa\\aaa.txt"; File file = new File(strPath); if(!file.exists())){ ...

  3. RDD转换DataFrame

    Spark SQL有两种方法将RDD转为DataFrame. 1. 使用反射机制,推导包含指定类型对象RDD的schema.这种基于反射机制的方法使代码更简洁,而且如果你事先知道数据schema,推荐 ...

  4. MySQL 5.6学习笔记（运算符）

    MySQL运算符包括四类:算术运算符.比较运算符.逻辑运算符和位运算符. 1. 算术运算符 用于种类数值运算.包括:加(+).减(-).乘(*).除(/).取余(%). 除法除数为零时,执行结果为nu ...

  5. Android Gradle 引入 aar 方式

    方式 1 File -> New -> New Module -> Import .JAR/.AAR Package Choose File Finish 在 build.gradl ...

  6. C#读取对象实例的值和对对象的属性自动赋值方法

    using System; using System.Data; using System.Reflection; namespace DBUtility { /// <summary> ...

  7. 【Unity】3.5 导入音频文件

    分类:Unity.C#.VS2015 创建日期:2016-04-05 一.简介 音频文件 (Audio File) 资源的选择原则应该以无故障地流畅运行为宗旨.下面列出了常用的音频文件. .AIFF ...

  8. 3-6-汉诺塔(Hanoi Tower)问题-栈和队列-第3章-《数据结构》课本源码-严蔚敏吴伟民版

    课本源码部分 第3章  栈和队列 - 汉诺塔(Hanoi Tower)问题 ——<数据结构>-严蔚敏.吴伟民版        源码使用说明  链接☛☛☛ <数据结构-C语言版> ...

  9. 如何高效的学习 TensorFlow 代码? 以及TensorFlow相关的论文

    https://www.zhihu.com/question/41667903 源码分析 http://www.cnblogs.com/yao62995/p/5773578.html 如何贡献Tens ...

  10. mysql备份的三种方式详解

    一.备份的目的 做灾难恢复:对损坏的数据进行恢复和还原需求改变:因需求改变而需要把数据还原到改变以前测试:测试新功能是否可用 二.备份需要考虑的问题 可以容忍丢失多长时间的数据:恢复数据要在多长时间内 ...