1.先看要实现的效果

实际的效果图

可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。

看实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <style>

        body{margin:0;padding:0}

        /*定位父级div水平垂直居中*/

        .body_main{

            width:200px;

            height: 300px;

            background-color: #3091E5;

            margin:-150px 0 0 -100px;

            top:50%;

            left:50%;

            position: absolute;

        }

        /*定位水平div垂直居中*/

        .row_div{

            width:200px;

            height: 50px;

            background-color:#88E500;

            position: absolute;

            top:50%;

            margin:-25px 0 0 0;

        }

        /*定位列div水平居中*/

        .clou_div{

            width:50px;

            height: 300px;

            background-color: #3c510c;

            left:50%;

            position: absolute;

            margin:0 0 0 -25px;

        }

    </style>

</head>

<body>

    <div class="body_main">

        <div class="row_div">横向的div</div>

        <div class="clou_div">竖直的div</div>

    </div>

</body>

</html>

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

总结：

css中的绝对定位是相对于最近已定位的祖先元素进行定位，如果元素没有已经定位的祖先元素，那么位置相对于初始的包含块进行定位。

css定位“十字架“之水平垂直居中的更多相关文章

  1. 使用CSS定位元素实现水平垂直居中效果

    总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...

  2. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  3. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  4. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  5. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  6. 用css让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  7. CSS：div/img水平垂直居中

    div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. css的div动态水平垂直居中

      div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...

  9. 【Web】CSS实现绝对定位元素水平垂直居中

    网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. UVa 1610 Party Games（思维）

    题意: 给出一系列字符串,构造出一个最短字符串(可以不在集合中)大于等于其中的一半,小于另一半. 析:首先找出中间的两个字符串,然后暴力找出最短的字符串,满足题意. 代码如下: #include &l ...

  2. location位置操作

    使用location对象可以通过很多方式来改变浏览器的位置. location.assign('http://www.klkx.com') 传入一个URL地址 这样可以立即打开一个新的URL并在浏览器 ...

  3. Java8函数式接口/Lambda表达式/接口默认方法/接口静态方法/接口冲突方法重写/lambda表达式指定泛型类型等

    一:函数式接口 1.函数式接口的概念就是此接口必须有且只能有一个抽象方法,可以通过@FunctionalInterface来显示规定(类似@Override),但是没有此注解的但是只有一个抽象方法的接 ...

  4. 用JAVA实现大文件上传及显示进度信息

    一. 大文件上传基础描述: 各种WEB框架中,对于浏览器上传文件的请求,都有自己的处理对象负责对Http MultiPart协议内容进行解析,并供开发人员调用请求的表单内容. 比如: Spring 框 ...

  5. 关于Linux学习中的问题和体会

    本科期间未开展过与之相关的课程,所以初次接触Linux难免有些问题!参照老师给的学习资料中内容,逐步解决了一些问题,但还有一些问题没解决,下面列举出自己遇到的一些问题. 1.在环境变量与文件查找专题中 ...

  6. 9.DataGrid数据表格

    后台获取数据并将其转换为json数组格式: 前台获取数据并显示在数据表格中:

  7. HTML 基础 块级元素与行内元素

    块元素:单独占一行,宽度占整行,可以包含内联元素和其他块元素,通过样式display:inline,变为行内元素,不换行 内联元素:不单独占一行,宽度根据内容来决定,只能容纳文本或者其他内联元素 ,可 ...

  8. [jquery]如何实现页面单块DIV区域滚动展示

    // 未实现功能的代码 1(自己写的代码) var _cur_top = $(window).scrollTop(); var num = $(".class_section"). ...

  9. Java框架知识点总结

    一.Struts1的运行原理 在启动时通过前端总控制器ActionServlet加载struts-config.xml并进行解析,当用户在jsp页面发送请求被struts1的核心控制器ActionSe ...

  10. iOS 应用如何完全支持 IPv6-ONLY 网络？

    iOS 应用如何完全支持 IPv6-ONLY 网络?¶ 警告 您当前查看的页面是未经授权的转载! 如果当前版本排版错误,请前往查看最新版本:http://www.cnblogs.com/qin-nz/ ...