经典的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. RF框架自定义测试库开发

    静态库 方法(methods)直接映射为关键字名称.关键字接受和方法相同的参数, 通过抛异常来 报告错误, 通过往标准输出里写入来写 log, 同时可以通过return 来返回结果. 创建步骤: ▲ ...

  2. linux常用查看系统操作的linux命令

    系统# uname -a # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue # 查看操作系统版本# cat /proc/cpuinfo # 查看CPU信息# hostna ...

  3. java 百度地图判断两点距离1

    package baiduApi; /** * 类名称:PointToDistance * 类描述:两个百度经纬度坐标点,计算两点距离 * 创建人:钟志铖 * 创建时间:2014-9-7 上午10:1 ...

  4. 一些有意思的git

    fs: https://github.com/psankar/simplefs https://github.com/gzc/isystem/blob/master/basic/Crash_Consi ...

  5. leetcode探索中级算法

    leetcode探索中级答案汇总: https://leetcode-cn.com/explore/interview/card/top-interview-questions-medium/ 1)数 ...

  6. [Python]python-jenkins获取正在构建中的job

    需求: 我现在需要完成1个接口,这个接口会启动jenkins构建jobA, jobA构建结束, 返回job的构建结果 思路: 首先使用get_job_info获取最后1次构建的构建序号,然后再通过ge ...

  7. flutter 单例

    flutter中的单例 class DataSave{ factory DataSave() => shared(); static DataSave _instance; DataSave._ ...

  8. 内存数据库：memcached与redis技术的对比试验

    本文以高性能nginx服务器为应用背景,想利用缓存技术来减轻系统负荷,加快响应时间,从而增加web服务器的吞吐量. redis是一种分布式内存数据库,memcached是一种内存缓存技术,它们都采用k ...

  9. Ceph 分布式存储架构解析与工作原理

    目录 文章目录 目录 Ceph 简介 Ceph 的架构:分布式服务进程 Ceph Monitor(MON) Ceph Object Storage Device Daemon(OSD) Ceph Me ...

  10. centos6密钥验证

    密钥验证: 公钥(服务器上)私钥(客户端)在远程登录软件上可生成SSH密钥对.在服务器上建目录.SSH 再在其中建文件authorized_keys,复制公钥到服务器上此文件中. (1)selinux ...