<!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. 我的Sharepoint母版页的使用

    在Sharepoint 2010母版页文件夹里面,有一个叫v4.master的母版页文件. 在它的基础上修改成想要的母版页.我们用最少的修改完成我们想要的效果. 我们有时是要这样的一个母版页,顶部Ri ...

  2. maven pox配置

    Maven教程初级篇02:pom.xml配置初步 1. 创建项目并更改项目基本配置信息 在命令行下运行如下命令创建一个项目: 1 mvn archetype:create -DgroupId=net. ...

  3. 原来在linux上切换jdk的版本是这么简单

    上次在linux上切换jdk版本的时候,还配置了半天的环境变量,今天又查了一下,原来是这么的简单 1. 查看相应的jdk是否在 ubuntu的jdk菜单里,查看: (输全哦) update-alter ...

  4. FileInputStream和BufferedInputStream的区别

    FileInputStream 属于数据源 BufferedInputStream 属于FileInputStream的一个装饰 BufferedInputStream 有个内部缓冲区当read时会先 ...

  5. [ASE]sprint2 总结 & sprint3计划

    第二个sprint半圆满的结束了, 经历了四周之后我们将整个的框架搭建好,并且能够正常的游戏对战,破坏场景,聊天…… 但是正如老师所述,缺乏亮点. 不过大家都是第一次做,完全把他当成一个工程来一点一点 ...

  6. Java构建工具Ant小记(一)

    Ant简介 Ant是基于java的构建工具.理论上来说它类似与make工具,但是却克服了make的一些固有的缺陷. 传统的Make是基于操作系统shell的构建工具,虽然也可以基于工作的os对make ...

  7. WPF快速入门系列(9)——WPF任务管理工具实现

    转载自:http://www.cnblogs.com/shanlin/p/3954531.html WPF系列自然需要以一个实际项目为结束.这里分享一个博客园博客实现的一个项目,我觉得作为一个练手的项 ...

  8. ENode 1.0 - 消息队列的设计思路

    开源地址:https://github.com/tangxuehua/enode 上一篇文章,简单介绍了enode框架内部的整体实现思路,用到了staged event-driven architec ...

  9. Sensor（GYROSCOPE）

    package com.example.sensor01; import java.util.List; import android.hardware.Sensor; import android. ...

  10. 两种include方式及filter中的dispatcher解析

    两种include方式 我自己写了一个original.jsp,另外有一个includedPage.jsp,我想在original.jsp中把includedPage.jsp引进来有两种方式: 1.& ...