经典的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. Php+Redis函数使用总结

    因项目需求,冷落了redis,今天再重新熟悉一下: <?php //连接 $redis = New Redis(); $redis->connect('127.0.0.1','6379', ...

  2. [VBA]定向提取符合条件的内容

    要求:若A列满足值为c,则将b列对应的内容背景色调为红色,并提取出来: 代码如下: Sub naqu()Dim i As IntegerFor i = 2 To Range("a65536& ...

  3. JetBrain系列学生免费授权

    1.访问网址:https://www.jetbrains.com/zh/student/ 2.往下滚动,点击立即申请 3.填写邮箱信息 4.确认后,跳转到Thank you页面,上面说已经给注册邮箱发 ...

  4. AngularJS unit test report / coverage report

    参考来源: http://www.cnblogs.com/vipyoumay/p/5331787.html 这篇是学习基于Angularjs的nodejs平台的单元测试报告和覆盖率报告.用到的都是现有 ...

  5. C基础知识(10)：预处理器

    C预处理器不是编译器的组成部分,但是它是编译过程中一个单独的步骤.简言之,C预处理器只不过是一个文本替换工具而已,它们会指示编译器在实际编译之前完成所需的预处理. 所有的预处理器命令都是以井号(#)开 ...

  6. 转：async异步、thread多线程

    很全面的知识,转来留着 1:https://www.cnblogs.com/xibei/p/11826498.html 2:https://www.cnblogs.com/xibei/p/118742 ...

  7. python-阿里镜像源-pip

    将pip源设置为国内 >>>windows 1 地址栏输入%appdata% 2 新建pip文件价 3 文件夹里建pip.ini 内容: [global] timeout = 600 ...

  8. 类属性与对象实现，init方法的作用，绑定方法，绑定方法与普通函数的区别，继承，抽象与继承，派生与覆盖

    今日内容: 1.类属性与对象属性 2.init方法的作用 3.绑定方法 4.绑定方法与普通函数的区别(非绑定方法) 5.继承 6.抽象与继承 7.派生与覆盖 1.类属性与对象属性 类中应该进存储所有对 ...

  9. Msf小结

    Msfvenom是有效负载生成和编码的组合. 生成攻击载荷 Linux下反弹Meterpreter shell 1 msfvenom -p linux/x86/meterpreter/reverse_ ...

  10. Linux 基础整理

    Linux系统的启动过程大体上可分为五部分:内核的引导:运行init:系统初始化:建立终端 :用户登录系统. 用户登录 Linux的账号验证程序是login,login会接收mingetty传来的用户 ...