<!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. flash 定义二维数组

    一种二维数组的定义方法   //假设二维数组为 [5][7]var  xn:Number = 5;var  yn:Number = 7; //定义一数值变量var  temp:Number = 0; ...

  2. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  3. Oozie命令行常用命令汇总[转]

    Oozie命令行常用命令汇总 有时候脚本跑多了就不愿意在OozieWeb端去看脚本的运行情况了.还好Oozie提供了很多命令行命令.能通过命令行直接检索自己想看到的脚本信息.在这里简单进行一下总结.一 ...

  4. java类集开发中一对多和多对多的关系的实现

    摘自<java开发实战经典>李兴华.著 一对多的关系 一个学校可以包含多个学生,一个学生属于一个学校,那么这就是一个典型的一对多关系,此时就可以通过类集进行关系的表示. 在定义Studen ...

  5. redmine中创建项目与跟踪标签（原创）

    今天来说下本公司所用到的项目管理工具redmine,总体来说还是比较好用的.redmine中可以记录项目的整个过程,可创建跟踪标签(里程碑.需求用例.功能.任务.缺陷)来进行对项目的管控.跟踪标签根据 ...

  6. （转） silverlight 样式学习

    原文地址:http://www.cnblogs.com/Joetao/articles/2074727.html <UserControl x:Class="StyleDemo.Mai ...

  7. GDB调试精粹及使用实例（转）

    一:列文件清单 1． List (gdb) list line1,line2 二:执行程序 要想运行准备调试的程序,可使用run命令,在它后面可以跟随发给该程序的任何参数,包括标准输入和标准输出说明符 ...

  8. 直接通过Ajax 处理程序加 Action名，取得变量值。

    var set_value;$(document).ready(function () {            var query = createParam('GetValue', '0');   ...

  9. [ASE]sprint3 总结 & sprint4计划

    斯普润特4! 啊终于到最后一个阶段了…… 有种苦日子就要熬到头跟小组合作意犹未尽的感觉 那么开始sprint3-sprint4的衔接吐槽总结 在之前的两周也就是sprint3期间正赶上出国申请的dl, ...

  10. CrossOver 13.0 发布，Windows 模拟器

    允许在 Linux 和 OS X 平台运行 Win32 程序的 CrossOver 套件发布 13.0 版本,带来了完全重构的 3D 处理流程,将大幅度提高游戏性能. Linux 平台相关变化有: 带 ...