<!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. docker搭建及使用：centos7.0+docker+flask+nginx

    flask笔记: centos7安装Docker: yum install docker 启动docker服务: service docker start 构建基本镜像: sudo docker pu ...

  2. 2018-2019-2 网络对抗技术 20165325 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165325 Exp3 免杀原理与实践 实验内容(概要) 一.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己 ...

  3. PHP常用方法整理

    最近开始写PHP项目,各种常用的方法简单整理一下,以备后用. 1.  Xml转Json json_decode(json_encode(simplexml_load_string($xml, 'Sim ...

  4. 基于用户的协同过滤电影推荐user-CF python

    协同过滤包括基于物品的协同过滤和基于用户的协同过滤,本文基于电影评分数据做基于用户的推荐 主要做三个部分:1.读取数据:2.构建用户与用户的相似度矩阵:3.进行推荐: 查看数据u.data 主要用到前 ...

  5. (转)理解maven命令package、install、deploy的联系与区别

    我们在用maven构建java项目时,最常用的打包命令有mvn package.mvn install.deploy,这三个命令都可完成打jar包或war(当然也可以是其它形式的包)的功能,但这三个命 ...

  6. （转）前端开发-发布一个NPM包之最简单易懂流程

    原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...

  7. 一次String的错误使用

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

  8. css @import 导入文件

    导入另一个css文件 例如 <style type="text/css"> @import url(css/main.css); //导入css目录下的main.css ...

  9. 解决visual studio不能发现单元测试、无法运行单元测试的方法

    问题: 在vs2017里新建空的单元测试后,无法运行测试,即右键菜单的“运行测试”和“调试测试” 不能运行,在测试资源管理中也无法列出这个测试. 解决方法: 将测试项目的引用 Microsoft.Vi ...

  10. linux常用命令及使用技巧(二)

    ls显示指定工作目录下的内容,同windows中的dir命令 pwd命令显示当前工作目录 date命令,显示或修改系统时间与日期 passwd命令,设置用户密码 su命令改变用户身份 clear命令, ...