<!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. java字符串转为Map类型：split()方法的应用

    方法一: package com.thinkgem.jeesite.modules.socketTest.demo2; import java.util.HashMap; import java.ut ...

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

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

  3. window下 多开redis

    1.先复制整个redis 一份 2.在配置文件redis.windows.conf .redis.windows-server.conf中  改端口 3.cmd命令 redis-server redi ...

  4. python中的operator.itemgetter函数

    operator.itemgetter函数operator模块提供的itemgetter函数用于获取对象的哪些维的数据,参数为一些序号.看下面的例子 a = [,,] >>> b=) ...

  5. 【原创】大数据基础之Logstash（5）监控

    有两种方式来监控logstash: api ui(xpack) When you run Logstash, it automatically captures runtime metrics tha ...

  6. uitramon 安装包

    链接地址  密码:kkkk displayfintion :https://blog.csdn.net/JianJuly/article/details/80559933 密码:gn8p

  7. F - JDG HDU - 2112 （最短路）&& E - IGNB HDU - 1242 （dfs）

    经过锦囊相助,海东集团终于度过了危机,从此,HDU的发展就一直顺风顺水,到了2050年,集团已经相当规模了,据说进入了钱江肉丝经济开发区500强.这时候,XHD夫妇也退居了二线,并在风景秀美的诸暨市浬 ...

  8. CNN解析和模型分析

    https://wenku.baidu.com/view/b0add84eb94ae45c3b3567ec102de2bd9605de8a.html?pn=51 http://www.cnblogs. ...

  9. JS学习过程中碰到的小问题

    使用循环语句查找通讯录 //Setup var contacts = [ { "firstName": "Akira", "lastName" ...

  10. 清晰讲解SQL语句中的外连接，通用于Mysql和Oracle，全是干货哦

    直入主题: 我们做一个操作,将员工SCOTT的部门去掉,再次通过内连接查看数据,看看会产生什么现象? 使用内连接,查询数据 问题:找不到SCOTT员工了,只有13条数据,这显然不合理:这就是内连接的缺 ...