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 Boot WebFlux 快速入门实践

    02:WebFlux 快速入门实践 Spring Boot 2.0 spring.io 官网有句醒目的话是: BUILD ANYTHING WITH SPRING BOOT Spring Boot ( ...

  2. Java8 Period.between方法坑及注意事项

    在使用Java8 新特性中关于Period.between的方法时需注意该方法获取日期的区间问题. @Test public void test1(){ LocalDate from = LocalD ...

  3. 算法学习之剑指offer（十一）

    一 题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. import java.util.*; ...

  4. Kubernetes之Flannel介绍

    Flannel是CoreOS团队针对Kubernetes设计的一个网络规划服务,简单来说,它的功能是让集群中的不同节点主机创建的Docker容器都具有全集群唯一的虚拟IP地址. 在Kubernetes ...

  5. Unreal Engine 4 系列教程 Part 3：材质教程

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  6. drf框架安装配置及其功能概述

    0902自我总结 drf框架安装配置及其功能概述 一.安装 pip3 install djangorestframework 二.配置 # 注册drf app NSTALLED_APPS = [ # ...

  7. [Mathematics][MIT 18.02]Detailed discussions about 2-D and 3-D integral and their connections

    Since it is just a sort of discussion, I will just give the formula and condition without proving th ...

  8. Windows 服务程序(一)

    Windows 服务程序简介: Windows服务应用程序是一种需要长期运行的应用程序,它对于服务器环境特别适合. 它没有用户界面,并且也不会产生任何可视输出.任何用户消息都会被写进Windows事件 ...

  9. 使用Prometheus监控SpringBoot应用

    通过之前的文章我们使用Prometheus监控了应用服务器node_exporter,数据库mysqld_exporter,今天我们来监控一下你的应用.(本文以SpringBoot 2.1.9.REL ...

  10. Tomcat 的单机多实例配置

    有时候需要在一个服务器上部署多个Tomcat,通过不同的端口进行区分,比如,反向代理.但是不想简单的通过复制Tomcat来实现,这样既不方便以后的升级也不方便管理,那么这时候就需要配置Tomcat的单 ...