经典的css布局有以下几种，下面分别用不同的方法进行实现且进行对比。

一、水平居中

　　水平居中布局指的是当前元素在父级元素的容器中，水平方向上显示的是居中的，有以下几种方式来完成布局：

　　1、margin:0 auto; text-align:center实现水平居中。

　　　　直接给子元素加上margin:0 auto; text-align:center来实现.实际中用的最多，但有一个小问题就是如果子元素里有文本内容，文本内容也会居中。

　　2、display:table或者是display:inline-block配合margin来实现

　　3、相对定位实现居中

　　4、绝对定位实现居中，使用绝对定位有一点就是父元素要加上相对定位

　　5、flex实现水平居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css实现水平居中</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box1 {

            width: 100%;

            height: 100px;

            background: beige;

            /* position: relative; */

            /* display: flex;

            flex-direction: column; */

            display: flex;

        }

        .box2 {

            width: 100px;

            height: 100px;

            background: greenyellow;

            /* margin:0 auto;      第1种方式来水平居中

            text-align: center; */

            /* display: table;

            margin:0 auto;          第2种方式来水平居中 */

           /* position: relative;

           left: 50%;

            transform: translateX(-50%);   第3种方式来水平居中 */

            /* position: absolute;

            left:50%;

            transform: translateX(-50%);    第4种方式来水平居中 */

            /* align-self: center;              第5种方式来水平居中 */

            /* margin: auto;           第5种方式来水平居中,和display:flex配合使用 */

        }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2">box2</div>

    </div>

</body>

</html>

二、垂直居中

　　垂直居中布局指的是当前元素在父级元素的容器中，垂直方向显示是居中的，有以下几种方式来完成布局：

　　1、table-cell和vertical-align属性配合使用

　　　　　　给父元素添加display:table-cell;显示的效果等同于表格中的单元格（单元格的内容允许水平或者是垂直方向的对齐设置）　　

　　　　　　vertical-align:center;垂直方向上的居中

　　2、绝对定位和transform属性配合使用

　　　　　　这个要给父级一个相对定位

　　3、flex实现垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>垂直居中</title>

    <style>

        * {

            padding:0;

            margin: 0;

        }

        .box1{

            width: 100px;

            height: 500px;

            background-color: rgb(223, 223, 241);

            /* display: table-cell;

            vertical-align: middle;      第1种方法实现垂直居中 */

            /* position: relative; */

            /* display: flex;

            flex-direction: column;

            justify-content: center;     第3种方法实现垂直居中 */

        }

        .box2{

            width: 100px;

            height: 100px;

            background: greenyellow;

            position: absolute;

            /* top:50%;

            transform: translateY(-50%);   第2种方法实现垂直居中 */

        }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2">box2</div>

    </div>

</body>

</html>

三、居中布局

　　居中布局就是即水平居中又垂直居中

　　1、绝对定位加上transform实现居中布局

　　　　　　要给父级加上相对定位，还有一点问题就是兼容性的问题

　　　　　　要给父级元素加上：position:relative;

　　　　　　　　　子元素加上：position:absolute;top:50%;left:50% ;transform: translate(-50%,-50%);

　　2、table+margin来实现水平居中，table-cell和vertical-align实现垂直居中

　　　　　　有一点问题就是有可能会影响整体的布局效果没有绝对定位好

　　　　　　要给父级元素加上：display:table-cell;vertical-align:middle;

　　　　　　　　　子元素加上：display:table;margin:0 auto;　　　　　　

　　3、flex来实现水平垂直居中，它的作用最大

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>水平垂直居中</title>

    <style>

    *{

        margin:0;

        padding:0;

    }

    .box1{

        width: 500px;

        height: 500px;

        background-color: greenyellow;

        /* position: relative;      第1种水平垂直居中方式*/

        /* display: table-cell;    第2种水平垂直居中方式

        vertical-align: middle;

         */

         /* display: flex;

         justify-content: center;   第3种水平垂直居中方式 */

    }

    .box2{

        width: 100px;

        height: 100px;

        background-color: pink;

        /* position: absolute;   第1种水平垂直居中方式

        top:50%;

        left: 50%;

        transform: translate(-50%,-50%); */

        /* display: table;          第2种水平垂直居中方式

        margin: 0 auto; */

        /* align-self: center; 第3种水平垂直居中方式 */

    }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2">box2</div>

    </div>

</body>

</html>

ccs之经典布局（一）（水平垂直居中）的更多相关文章

  1. ccs之经典布局（二）（两栏，三栏布局）

    接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...

  2. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  3. ccs之经典布局（三）（等分，等高布局）

    接上篇ccs之经典布局(二)(两栏,三栏布局) 七.等分布局 等分布局是指一行被分为若干列,每一列的宽度是相同的值.两列之间有若干的距离. 1.float+padding+background-cli ...

  4. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  5. 解读 CSS 布局之水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  6. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  7. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  8. 谈谈flex布局实现水平垂直居中

    我们在这要谈的是用flex布局来实现水平和垂直居中.随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中.所以09年,W3C 提出了一种新的方案 ...

  9. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

随机推荐

  1. 转载 筛子算法之golang实现求素数解析

    package main import "fmt" // Send the sequence 2, 3, 4, ... to channel 'ch'. func generate ...

  2. Python学习笔记：Unittest框架了解

    Unittest单元测试框架不仅可以适用于单元测试,还可以适用于自动化测试用来的开发与执行,该测试框架可执行测试用例,并提供丰富的断言方法,最终生成测试报告. 一.Unittest常用方法 1.Tes ...

  3. maven的pom文件

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. gitlab 数据目录迁移

    一般情况下,采用gitlab作为版本管理工具,内网环境需要搭建gitlab服务器,安装好gitlab应用之后,就开始使用,但是随着时间的推移,发现gitlab的repository会越来越大.一般,从 ...

  5. Datafactory 实际使用案例

    Datafactory 实际使用案例 一.       简介 QuestDataFactory 是一种快速的.易于产生测试数据工具,它能建模复杂数据关系,且有带有GUI界面.DataFactory是一 ...

  6. jvm的学习笔记：二、类的初始化，代码实战（1）

    对于静态字段来说,直接定义该字段的类才会被初始化 System.out.println(MyChild1.str); 输出: myParent1 static block hello myParent ...

  7. 记录Linq中lambda动态表达式的使用方式

    项目中有的时候我们会用到动态表达式的方式去查询数据,这里简单记录下个人的使用方式,方便使用↓ //构建参数表达式 ParameterExpression parameter = Expression. ...

  8. 一个SQL注释引发的线上问题

    最近开始服务拆分,时间将近半个月.测试阶段也非常顺利,没有什么问题. 但上线之后的第二天,产品就风风火火的来找我们了,一看就是线上有什么问题.我们也不敢说,我们也不敢问,线上的后台商品忽然无法上架了, ...

  9. Python全栈开发之3、深浅拷贝、变量和函数、递归、函数式编程、内置函数

    一.深浅拷贝 1.数字和字符串 对于 数字 和 字符串 而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个内存地址. import copy # 定义变量 数字.字符串 # n1 = 123 n1 ...

  10. zk安装管理

    参考: https://www.cnblogs.com/yinzhengjie/p/9209319.html 10.52.110.48 bi-kafka-310.52.48.92 bi-kafka-1 ...