1 关于css实现水平垂直居中的一些方法：

.css的定位：用margin,padding,position

position:absolute;   //绝对定位，一般父级元素采用relative来配合使用，如果父级没有定位，将把body标签作为父级定位来使用

用position和margin的方法来实现两个div盒子的水平垂直居中：

html：

<body>

    <div class="parent">

        <div class="children">这里是子盒子</div>

    </div>

</body>

css:

 <style>
        .parent{
            background-color:aquamarine;
            width:300px;
            height:300px;
            position:relative;
        }
        .children{
            background-color:yellow;
            width:100px;
            height:100px;
            position:absolute;
            top: 0%;
            right: 0%;
            bottom:0%;
            left:0%;
            margin:auto;
        }
        /* .children{
            
            width:100px;
            height:100px;
            position:absolute;
            top:100px;
            left:100px;
        } */
    </style>
用flex布局实现：用justify-content和align-items来设置水平轴和垂直轴的定位

css:

<style>

    .parent {

        background-color: aquamarine;

        width: 300px;

        height: 300px;

        display: flex;

        /* 水平 */

        justify-content: center;

        /* 垂直 */

        align-items: center;

    }

    .children {

        background-color: yellow;

        width: 100px;

        height: 100px;

    }

    /* .children{

        width:100px;

        height:100px;

        position:absolute;

        top:100px;

        left:100px;

    } */

</style>

　　

效果：

.inline-height设置行高来实现垂直居中，text-align:center来设置水平居中
        .parent{

            background-color:aquamarine;

            width:300px;

            height:300px;

            text-align: center;

        }

        .children{

            display:inline-block;

            line-height:300px;

        }

line-height:inherit;  //规定从父元素那里继承line-height的值

margin:inherit;   //规定从父元素那里继承margin的值

2 关于css层叠z-index的记录

z-index：属性在position(非stastic)中有效，数值可正可负，数值越大，离屏幕越近，比较要看它显示的不同的级别

关于css布局的一点记录的更多相关文章

  1. 关于一个css布局的小记录

    这里我们采用一种最简单的 方式,至少我目前认为最简单的方式,使用flex布局来实现 下面是html结构: <div class="box1"> <div clas ...

  2. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  3. [CSS布局]简单的CSS三列布局

    前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...

  4. css布局基础总结

    前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...

  5. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  6. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  7. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  8. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  9. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

随机推荐

  1. Spring系列（六）：Spring事务源码解析

    一.事务概述 1.1 什么是事务 事务是一组原子性的SQL查询,或者说是一个独立的工作单元.要么全部执行,要么全部不执行. 1.2 事务的特性(ACID) ①原子性(atomicity) 一个事务必须 ...

  2. mac下安装jmeter

    jmeter官网下载 双击解压 命令行进入/Users/yanguobin/apache-jmeter-5.1.1/bin目录下,输入sh jmeter即可启动 也可以 配置环境变量 vim ~/.b ...

  3. Kubernetes的RBAC是啥

    RBAC: Role-Based Access Control,基于角色的权限控制,有以下三种角色 Role:角色,它其实是一组规则,定义了一组API对象的操作权限 Subject:被作用者,可以是人 ...

  4. bugku细心地大象

    解压得到图片,查看属性,发现一段编码. 用winhex打开图片,发现头文件是错的,正常jpg文件头文件为FF D8 FF E0 说明不是图片,是zip的文件头,更换格式. 丢到kali用binwalk ...

  5. 因果推理的春天-实用HTE(Heterogeneous Treatment Effects)论文github收藏

    一直以来机器学习希望解决的一个问题就是'what if',也就是决策指导: 如果我给用户发优惠券用户会留下来么? 如果患者服了这个药血压会降低么? 如果APP增加这个功能会增加用户的使用时长么? 如果 ...

  6. 基于 Web 端 3D 地铁站可视化系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

  7. 微信小程序登入流程

    微信小程序登入流程 一.首先前端先传code去后端 wx.login({ success(res) { if (res.code) { //发起网络请求 wx.request({ url: app.g ...

  8. AWD攻防工具脚本汇总(一)

    最近工作很忙 今天抽空准备下AWD比赛得攻防工具和脚本 以下只是常用 希望下周不被吊锤~~ 后续整理后想抽空写成一个攻击框架汇总放github~~ 这里从各种情景和需求中去总结工具和脚本的使用   情 ...

  9. PHP range

    1.函数的作用:生成范围内的数据 2.函数的参数: @param mixed $start @param mixed $end @param mixed $step 3.例子: <?php $n ...

  10. Unix 线程共享创建进程打开的文件资源（1）

    执行环境:Linux ubuntu 4.4.0-31-generic #50-Ubuntu SMP Wed Jul 13 00:07:12 UTC 2016 x86_64 x86_64 x86_64 ...