<!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. Leetcode#500. Keyboard Row（键盘行）

    题目描述 给定一个单词列表,只返回可以使用在键盘同一行的字母打印出来的单词.键盘如下图所示. 示例1: 输入: ["Hello", "Alaska", &quo ...

  2. makefile 嵌套

    目录结构: dynamic 和 static 两个目录实现加法功能, 分别生成动态库和静态库,   main.c 主文件链接加法功能,  终端命令执行:   make dynamic=1  则编译动态 ...

  3. Nginx开启gzip压缩解决react打包文件过大

    用create-react-app创建的react应用打包之后的build js有1M之多. 采用gzip打包传输,可以节约70%左右的带宽 nginx采用gzip打包方式 在nginx配置中添加如下 ...

  4. [转] xgboost

    还是不太明白,先mark一下 https://blog.csdn.net/v_july_v/article/details/81410574

  5. 安装spring tool suite时遇到的问题

    首先在Eclipse的市场里没有找到,在官网下载安装包后不能安装,于是找了解决办法,跟安装suite的版本还有关系. 我下的是http://download.springsource.com/rele ...

  6. Python简单试题

    1,相乘次数 题目要求描述: 一个整数每一位上的数字相乘,判断是否为个位数,若是则程序结束 ,不是则继续相乘,要求返回相乘次数. 例:39 > 3*9=27 > 2*7=14 > 1 ...

  7. 理解 Linux 的硬链接与软链接【转】

    转自:https://www.ibm.com/developerworks/cn/linux/l-cn-hardandsymb-links/index.html 从 inode 了解 Linux 文件 ...

  8. 【medium】78. Subsets

    求集合不重复的子集: 下面python的写法很好啊! class Solution(object): def subsets(self, nums): """ :type ...

  9. char *p[] 和char**的思考

    char *p[] = {"hello","world"}; char **pp; pp = p; printf("%s,%s\n",*pp ...

  10. Jmeter JDBC Connection Configuration 链接失败，提示Error preloading the connection pool

    修改数据配置的连接数即可:修改为小一点 下面是oracle 配置连接的方式