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. php获取文件的文件名（误区）

    文件路径:$path = '/home/files/1234.jpg'; php获取文件名,大家应该是轻车熟路了,写个小函数,分分钟 <?php //获取文件名 function get_fil ...

  2. Ned 的难题

    题目描述 Ned 再也看不下去 Robert 的种种恶习, 于是他决定出一道题来让他醒悟. Ned 的题目是这样: 给出一个有 n 个数的序列, 求其中所有连续子序列的数的最大公因数的乘积模 1000 ...

  3. CentOS 7 的 systemctl 命令

    Centos 7.* 使用 Systemd 进行系统初始化,因此,Centos 7.* 中我们可以使用 systemctl 管理系统中的服务. systemctl 管理的服务均包含了一个以 .serv ...

  4. SystemVerilog Assertion 设计、调试、测试总结（2）

    上一篇博客主要写了SVA的基本语法(详细),这一篇主要写SVA语法总结,以及如何查看SVA波形等. 断言assertion被放在verilog设计中,方便在仿真时查看异常情况.当异常出现时,断言会报警 ...

  5. taro taroUi的H5打包后路径/修改为./

      打包文件路径修改在config/index.tsx中,如下 esnextModules: ['taro-ui'],配置也需要在h5中写入并且将publicPath: './'即可,不需要在做一个h ...

  6. Vue中音乐播放器

    一.安装依赖 yarn add vue-aplayer ​ or` npm i vue-aplayer 二.使用 <template> <div class="vue_ap ...

  7. CSRF漏洞实战靶场笔记

    记录下自己写的CSRF漏洞靶场的write up,包括了大部分的CSRF实战场景,做个笔记. 0x01 无防护GET类型csrf(伪造添加成员请求) 这一关没有任何csrf访问措施 首先我们登录tes ...

  8. Ubuntu 安装中文

    系统环境:

  9. Cocos2d-x 学习笔记(11.3) JumpBy JumpTo

    1. JumpBy JumpTo JumpBy,边跳边平移,不只做垂直向上的抛物动作,同时还在向终点平移.JumpTo是JumpBy的子类. 1.1 成员变量 create方法 JumpBy: Vec ...

  10. Zeebe服务学习5-多实例特性实践

    一.背景 在0.21版本之前,Zeebe不支持多实例元素,在2019年10月9号发布的0.21版本中,加入这一特性, 主要是体现在Zeebe Modeler 0.7.0以及之后的版本中. 二.特性介绍 ...