<!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. [c语言]字符数组、字符串定义

    C语言中字符串通常用字符指针和字符数组来定义: char* pS="abcdef"; char s[]="abcdef"; 这两种方式都会在结尾为字符串隐式补结 ...

  2. 编译系统中的 NFA/DFA算法理解

    1.问题概述 NFA 和 DFA浅析---要深入了解正则表达式,必须首先理解有穷自动机. 有穷自动机(Finite Automate)是用来模拟实物系统的数学模型,它包括如下五个部分: 有穷状态集St ...

  3. 人脸识别经典算法三：Fisherface（LDA）

    Fisherface是由Ronald Fisher发明的,想必这就是Fisherface名字由来.Fisherface所基于的LDA(Linear Discriminant Analysis,线性判别 ...

  4. d3 API scale

    比例尺有很多种类型,每一种类型都有各自的方法. 常用的是linear log oridinal linear .rangeRound(): 输出的值 四舍五入 .copy():返回一个独立的副本 .t ...

  5. Autolayout（VFL）

    Autolayout(VFL) 1.NSLayoutConstraint + (NSArray *)constraintsWithVisualFormat:(NSString *)format opt ...

  6. 练习1-23：删去C语言程序中所有的注释语句（C程序设计语言 第2版）

    #include <stdio.h> main() { FILE * fp_i; FILE * fp_o; fp_i = fopen("input.txt", &quo ...

  7. JavaScript this用法总结

    在JavaScript中,this关键字可以说是最复杂的机制之一.对this的作用机制缺乏比较深入的理解很容易在实际开发中出现问题. 1.this的作用 为什么要在JavaScript中使用this呢 ...

  8. Twitter全局唯一ID生成算法

    测试:private static void TestIdWorker() { HashSet<long> set = new HashSet<long>(); IdWorke ...

  9. 里氏替换原则（Liskov Substitution Principle）

    开放封闭原则(Open Closed Principle)是构建可维护性和可重用性代码的基础.它强调设计良好的代码可以不通过修改而扩展,新的功能通过添加新的代码来实现,而不需要更改已有的可工作的代码. ...

  10. 《C#图解教程》读书笔记之四：类和继承

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.万物之宗:Object (1)除了特殊的Object类,其他所有类都是派生类,即使他们没有显示基类定义. ( ...