<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         body{

             margin : 0;

             padding: 0;

         }

         /* 关闭按钮 */

         .card{

             width: 200px;

             height: 240px;

             border: 1px solid #ccc;

             border-radius: .2em;

             margin: 100px auto;

         }

         .cardHeader{

             overflow: hidden;

             height: 40px;

             line-height: 40px;

             border-bottom: 1px solid #ccc;

         }

         .closeCard{

             display: inline-block;

             padding: 0 10px;

             font-size: 24px;

             font-family: helvetica;

             float: right;

             cursor:pointer;

             color: #ccc;

         }

         .closeCard:hover{

             color: #007;

         }

         /* flex实现水平垂直居中 */

         .father{

             /*以下三个设置*/

             display: flex;

             justify-content: center;

             align-items: center;

             width: 400px;

             height: 400px;

             border: 1px solid #ccc;

             margin: 100px auto;

         }

         .child{

             width: 40px;

             height: 60px;

             background: #ccc;

         }

     </style>

 </head>

 <body>

    <h3>关闭按钮</h3>

    <div class="card">

        <div class="cardHeader">

            <span class="closeCard"> &times;</span>

        </div>

    </div>

   <h3>flex实现水平垂直居中</h3>

    <div class="father">

        <div class="child"></div>

    </div>

 </body>

 </html>

Tips_关闭按钮的简单实现 && Felx实现水平垂直居中的更多相关文章

  1. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  2. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  3. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  4. CSS实现元素水平垂直居中—喜欢对称美，这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  5. 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...

  6. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  7. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

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

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

  9. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

随机推荐

  1. 多线程/多进程/异步IO

    SOCK_STREAM :TCPSOCK_Dgram :UDP family=AF_INET: 服务器之间的通信AF_INET6: 服务器之间的通信AF_UNIX: Unix不同进程间的通信 永远遵循 ...

  2. 软件测试之实际工作工作方式001--log4

    软件测试之实际工作工作方式001--log4 Dotest软件测试-董浩整理   领导安排任务后:   1)首先要确认理解:是指的某工作吗?具体有什么要求吗?时间截止到什么时候? 解析:   a.万一 ...

  3. 【转载】大白话Docker入门（一）

    原文:https://yq.aliyun.com/articles/63035 随着docker现在越来越热门,自己也对docker的好奇心也越来越重,终于忍不住利用了一些时间把docker学习一遍. ...

  4. 51nod 2512

    看错题目!!啊啊啊,都说了不能有前导,我怎么这么想当然呢!!另外1也是2的幂次方 代码: #include<iostream> #include<cstdio> #includ ...

  5. 面向对象原生JavaScript案例炫彩小球

    面向对象其实对于初学者来说还是比较难以理解的,以前看到一个面试题目 面向对象是什么? 面向对象是一种思想,千万别入坑了: 这次给大家带来的是一个鼠标移动产生小球的案例,不是我不想给大家分享如何去认识面 ...

  6. Linux代理搭建TinyProxy

    操作系统:阿里云CentOS 7.4 64位 安装方法: yum install tinyproxy 配置: vi /etc/tinyproxy/tinyproxy.conf Port 8888 // ...

  7. QT windeployqt

    qt发布release版本时需要打包一些dll,需要哪些呢?请看截图: 在qt的安装包下找到这些文件,放在release文件夹下即可,当然有些时候也会需要一些其他的,比如含有串口的程序还需要加入Qt5 ...

  8. 图文详解之ZSH美化你的终端CLI

    在这个博客中,我将介绍安装ITerm2,ZSH shell,“我的ZSH”,主题,ITerm2配色方案,“我的ZSH”插件,并启用“连线”支持,以帮助创建一个美丽而强大的终端. 如果你想让你的常规Ba ...

  9. PHP 两数组循环组合

  10. 一次String的错误使用

    今日,在写代码的过程中,程序执行一个方法居然出现了heap space溢出的异常. 从来还没有遇到这样的异常,打断点发现是做字符串拼接时出现此异常. 所以知道了是String使用的异常,因为我做的操作 ...