<!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. C# Datetime时间指定时区

    string start_time_str = "2018-03-21 06:00:00"; DateTime.Parse(start_time_str) // :: 格林威治时间 ...

  2. [转]在static代码块或static变量的初始化过程中使用ServiceManager提供的api的陷阱

    一. 案例 1.源码: /** @hide */ private TelephonyManager(int slotId) { mContext = null; mSlotId = slotId; i ...

  3. k8s部署etcd数据库集群

    ⒈下载 https://github.com/etcd-io/etcd/releases ⒉解压 tar -zxvf etcd-v3.3.12-linux-amd64.tar.gz ⒊移动可执行文件及 ...

  4. 添加一个非模态对话框在revit中

    RequestHandler handler = new RequestHandler(); ExternalEvent exEvent = ExternalEvent.Create(handler) ...

  5. 题解 P5301 【[GXOI/GZOI2019]宝牌一大堆】

    这道题除了非常恶心以外也没有什么非常让人恶心的地方 当然一定要说有的话还是有的,就是这题和咱 ZJOI 的 mahjong 真的是好像的说~ 于是就想说这道题出题人应该被 锕 掉 noteskey 整 ...

  6. jmeter创建时间函数

    固定格式的年月日 ${__time(yyyyMMdd,)} 20151214 //返回年月日 ${__time(HHmmss,)} 092816 //返回时分秒 ${__time(yyyyMMdd-H ...

  7. Beta答辩总结

    组员名单 短学号 姓名 备注 409 后敬甲 组长 301 蔡文斌 315 黄靖茹 423 刘浩 317 黄泽 328 卢泽明 617 葛亮 344 张杰 348 朱跃安 链接汇总 组长博客:后敬甲 ...

  8. CSS --记录

    CSS3与文字渐变光影流动动画效果实现 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/word ...

  9. 小程序：navigateBack()修改数据

    1.获取当前页面js里面的pages里的所有信息var pages = getCurrentPages(); 2. -2上一个页面    -3是上上个页面 var prevPage = pages[p ...

  10. SQL语句：子查询

    一,子查询定义: 子查询就是嵌套在主查询中的查询. 子查询可以嵌套在主查询中所有位置,包括SELECT.FROM.WHERE.GROUP BY.HAVING.ORDER BY. 但并不是每个位置嵌套子 ...