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

<!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. Atitit  404错误的排查流程总结 v3 qaf

    Atitit  404错误的排查流程总结 v3 qaf 1.1. 用了注解不生效 提示404 Not Found1 1.2. 路径不对了,开头多了个空格1 2. 500 Servlet Excepti ...

  2. Atitit  undac网络设备管理法案 (路由器 交换机等)    法案编号USRr101510

    Atitit  undac网络设备管理法案 (路由器 交换机等)    法案编号USRr101510 1.1. 版本历史1 1.2. 密码设置规范 与原则1 1.3. 如何设置密码 ,设置一个简单又安 ...

  3. vivado 的调试工具ILA抓到的波形可以保存

    Vivado下debug后的波形通过图形化界面并不能保存抓取到波形,保存按钮只是保存波形配置,如果需要保存波形需要通过TCL命令来实现: write_hw_ila_data0730_ila_1 [up ...

  4. [na]tcp&udp扫描原理(nmap常用10条命令)

    nmap软件使用思路及常见用法 Nmap高级用法与典型场景 namp -sn 4种包 使用nmap -sn 查询网段中关注主机或者整个网段的IP存活状态 nmap -sn nmap针对局域网和广域网( ...

  5. View：Android View的scrollTo(),scrollBy(),getScrollX(), getScrollY()的理解

    Android系统手机屏幕的左上角为坐标系,同时y轴方向与笛卡尔坐标系的y轴方向想反.提供了 getLeft(), getTop(), getBottom(), getRight() 这些API来获取 ...

  6. .NET MVC EF框架数据库连接配置

    1:数据库的配置和连接 Web.config <connectionStrings> <add name="SQLConnectionString" connec ...

  7. 每日英语：China's Wistful Wen Gets His Wish

    As his term as premier was drawing to a close, Wen Jiabao reflected wistfully on some of the goals h ...

  8. 使用flume将kafka数据sink到HBase【转】

    1. hbase sink介绍 1.1 HbaseSink 1.2 AsyncHbaseSink 2. 配置flume 3. 运行测试flume 4. 使用RegexHbaseEventSeriali ...

  9. mysql关联更新update

    https://blog.csdn.net/babyfish13/article/details/78082844 ****************************************** ...

  10. LeetCode: Search in Rotated Sorted Array II 解题报告

    Search in Rotated Sorted Array II Follow up for "LeetCode: Search in Rotated Sorted Array 解题报告& ...