<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>纯CSS制作水平垂直居中“十字架”</title>

    <style>

        body,div{

            margin:;

            padding:;

        }

        #box{

            position:absolute;

            top:;

            left:;

            right:;

            bottom:;

            width:400px;

            height:300px;

            margin:auto;

        }

        #box::before{

            content:"";

            position:absolute;

            left:50%;

            top:;

            width:30px;

            height:100%;

            margin-left:-15px;

            background-color:pink;

        }

        #box::after{

            content:"";

            position:absolute;

            left:;

            top:50%;

            width:100%;

            height:30px;

            margin-top:-15px;

            background-color:pink;

        }

    </style>

</head>

<body>

    <div id="box"></div>

</body>

</html>

<!-- div默认的宽度是100%，当div绝对定位以后，其宽度是按照div中内容的宽度。 -->

<!-- 如果需要使用margin让一个盒子水平居中，必须设置盒子的宽 -->

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

width:400px;

height:300px;

margin:auto;

先清除这个盒子的top，right，bottom，left值，然后让这个盒子自动根据浏览器的屏幕水平垂直居中。

纯CSS制作水平垂直居中“十字架”的更多相关文章

  1. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  2. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  3. margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架

    有这么一个题目: 使用重构的方式制作出一个如下图的水平.垂直都居中短边为50px,长边为150px的红色十字架. 要求只使用2个div完成 答案: <!DOCTYPE html PUBLIC & ...

  4. 未知高度-纯css实现水平垂直居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  6. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  7. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  8. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  9. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

随机推荐

  1. Thinkphp内置截取字符串函数

    Thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便.调用函数也一样,可以和smarty一样调用自己需要的函数,而官方也内置了一些常用的函数供大家调用. 比如今天我们说的截 ...

  2. MongoDB学习笔记-06 数据库命令、固定集合、GridFS、javascript脚本

    介绍MongoDB支持的一些高级功能: 数据库命令 固定大小的集合 GridFS存储大文件 MongoDB对服务端JavaScript的支持 数据库命令 命令的原理 MongoDB中的命令其实是作为一 ...

  3. 精益VS六西格玛

    名称 精益方法 Six Sigma管理 假定 1)消除浪费可以改善绩效 2)大量的小改进更有利于组织成长 1)问题总是存在的: 2)测量是重要的: 3)随着变异减少,系统产出得到改进 文化基础 东方以 ...

  4. cas+shiro实现不时时的去请求cas进行身份验证

    cas+shiro不进行时时去cas验证身份信息,需要用shiro在当前系统有一份完整的认证机构. 那么有一个问题,什么时候去cas校验信息,目前的配置方式: cas系统设置默认的浏览器session ...

  5. 转：给 C# 开发者的代码审查清单

      给 C# 开发者的代码审查清单   [感谢@L就是L 的热心翻译.如果其他朋友也有不错的原创或译文,可以尝试推荐给伯乐在线.] 这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考. ...

  6. 使用的组件：JQuery UI

    jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使 ...

  7. Java jstatd详解

    jstatd 命令全称: Virtual Machine jstat Daemon DESCRIPTION The  jstatd tool is an RMI server application ...

  8. unity 状态机 + svn + 码云 上篇

    最近刚找到在实习,忙于公司一个c++ 项目 ,一直想写博客来着,没时间写今天熬夜打算先献上自己前几天自己封装的一个fsm状态机 话不多说,直接上正题,这篇博客主要是在学校的时候状态机一直使用的是pla ...

  9. 利用jmSlip写一个移动端顶部日历选择组件

    可滚动选日期,并限制哪些日期可选和不可选. 主要用来根据后台返回生成一个日期选择器. 具体实现可关注jmslip: https://github.com/jiamao/jmSlip 示例:http:/ ...

  10. 解决Ubuntu Server 12.04 在Hyper-v 2012 R2中不能使用动态内存的问题

    前言 全新Hyper-v 2012 R2终于开始支持在Linux的VPS中使用动态内存,可以大大优化服务器的资源分配,小弟我兴奋不已,于是抽空时间赶紧升级到 2012 R2,好好整理一番内存分配,不过 ...