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. LeetCode_232-Implement Queue using Stacks

    题意是使用栈实现队列:队列是先进先出,后进后出. class MyQueue { public: /** Initialize your data structure here. */ MyQueue ...

  2. bugku旋转跳跃

    下载下是一个mp3音频,尝试听了下,没有收获, 使用mp3stege,将文件拷在mp3stege目录下,然后使用cmd cd到目录下 命令行是decode -X -P 密码 文件 生成了一个文本 打开 ...

  3. 机器学习回顾篇（7）：决策树算法（ID3、C4.5）

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  4. 致远OA_0day批量植Cknife马一步到位

    最近各位师傅都在刷这个嘛,原本的exp是上传一个test123456.jsp的命令执行的马子,不过我在试的时候发现替换成C刀一句话出错,原因未知,并且test123456.jsp如果存在的话用原来ex ...

  5. css div 自适应内容

    .adapt-content{ display:inline-block; *display:inline; ; } 见:http://www.cnblogs.com/refe/p/5051661.h ...

  6. PHP 数组转json格式，key的保存问题

    <?php $arr = [ 2, 3, ]; echo print_r($arr,true); echo json_encode($arr); echo "\n\n"; $ ...

  7. [UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画

    1. 什么是 CompositionBrush CompositionBrush(合成画笔)是操作可视化层时用于绘制 SpriteVisual 区域的画笔. 使UWP 应用时可以选择使用 XAML 画 ...

  8. [BZOJ1116] CLO

    1116: [POI2008]CLO Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1311  Solved: 709[Submit][Status] ...

  9. opencv::绘制-基本几何

    画线 cv::line(LINE_4\LINE_8\LINE_AA) 画椭圆 cv::ellipse 画矩形 cv::rectangle 画圆 cv::circle 画填充 cv::fillPoly ...

  10. 第三方软件 pcanywhere提权

    pcanywhere 是一个远程管理软件 1.访问pcanywhere默认安装目录 访问 下载打开 利用破解工具直接 选择刚刚下载的软件 点破解 拿到用户密码后去百度下载客户端让后连接