<!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. Mysql 插入部分字段问题

    1. 字段如果不设置auto_increment和default的值,是不允许插入表的. 2. insert into student(id, name) values("1", ...

  2. jq点击元素删除父级

    首先要能找到父级:需要操作的dom结构如下: <tbody> <tr> <td>星期一早起</td> <td class="status ...

  3. NSThread 子线程 Cocoa NSOperation GCD（Grand Central Dispatch） 多线程

    单词:thread 英 θred:n 线.思路.vt 穿过.vi 穿透过 一.    进程.线程 进程:正在进行中的程序被称为进程,负责程序运行的内存分配,每一个进程都有自己独立的虚拟内存空间 线程: ...

  4. position定位

    CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...

  5. 微信公众号 扫码支付 模式二 demo

    扫码支付 本文附有代码,在下方,如果不熟悉场景的可以看看下面的场景介绍 场景介绍 官网介绍地址:https://pay.weixin.qq.com/wiki/doc/api/native.php?ch ...

  6. 初学python里的yield send next

    今天看书的时候突然看到这个想起来一直没有怎么使用过send和next试了一下 发现了一个诡异的问题 import math def get_primes(start): while 1 : if is ...

  7. SQL入门经典(九) 之自定义函数

    UDF和存储过程很类似,用户自定义函数是一组有序的T-SQL语句,这些语句被预先优化和编译,并且可以作为一个单元来测试调用.UDF和存储过程的主要区别在于结果返回方式,为了能支持更多返回值,UDF比存 ...

  8. jQuery Ready 与 Window onload 的区别(转)

    “我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?一 般情况下都是设置body标签的onload监听window的loa ...

  9. [转]C#调用FFMPEG,并异步读取输出信息的代码

    http://www.cnblogs.com/Leo_wl/archive/2011/12/31/2308841.html

  10. 【转】 Nginx深入详解之多进程网络模型

    [转自]http://blog.chinaunix.net/uid-22312037-id-3974068.html 一.进程模型        Nginx之所以为广大码农喜爱,除了其高性能外,还有其 ...