经典的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. 朴素贝叶斯文本分类-在《红楼梦》作者鉴别的应用上（python实现）

    朴素贝叶斯算法简单.高效.接下来我们来介绍其如何应用在<红楼梦>作者的鉴别上. 第一步,当然是先得有文本数据,我在网上随便下载了一个txt(当时急着交初稿...).分类肯定是要一个回合一个 ...

  2. c 使用lua 示例

    #include <stdio.h> #include <string.h> #include <lua.h> #include <lauxlib.h> ...

  3. android下载网络图片，设置宽高，等比缩放

    使用Picasso组件去下载图片会发现图片宽高会变形不受等比缩放控制,即使设置了图片的 scaleType,可能是对Picasso的api没有用对, Picasso.with(this.activit ...

  4. rabbiit报错处理

    一.ping不同download.yunwei.edu 内网服务地址必须在前面 [root@localhost ~]# vim /etc/resolv.conf # Generated by Netw ...

  5. Linux 下 Mysql忘记密码重置

    1.修改配置文件 /etc/my.cnf 在[mysqld]下 加入skip-grant-tables 2.重启mysql 命令:service mysqld restart 3.等待几分钟后 就可以 ...

  6. React Native 安装

    第一 :在天朝如果你可以违规上网的话便可以按 react native 中文网的文档进行安装与调试.地址为:https://reactnative.cn/docs/getting-started.ht ...

  7. CTF—攻防练习之HTTP—暴力破解

    攻击机:192.168.32.152 靶机:192.168.32.164 首先nmap,nikto -host ,dirb 扫描开放带端口,探测敏感文件,扫描目录 开放了21,22,80端口,看到一个 ...

  8. 如何使用StarUML for Mac创建和修改元素

    StarUML for Mac是一款UML软件建模器,支持快速编辑中的许多缩写,一次创建元素和关系,如子类,支持接口等.如何使用StarUML for Mac创建和修改元素?下面我们来介绍一下. 如何 ...

  9. Appium-实战之启动App 获取信息说明

    如下为启动 格来云游戏APP启动信息 代码如下: from appium import webdriver caps = {} caps["platformName"] = &qu ...

  10. Linux编辑网络连接

    Linux编辑网络连接   实验目标: 通过本实验掌握新建网络连接.修改hosts文件.修改主机名的方法. 实验步骤: 1.新建一个名为review的网络连接,并配置ip地址,启用新连接 2.修改ho ...