经典的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. CentOS 安装 Mongodb详解 --- 无Linux基础

    先去官方下载离线安装包:https://www.mongodb.com/ ftp连接一下服务器,把离线包上传上去 XShell连接一下: 解压文件(你输一点就可以按tab键,它会自动补全):tar - ...

  2. vue 登录页面填坑

    上边的导航头,会显示在登陆页面上,暂时的解决办法实: <template> <div style="position: fixed; top:0px; left:0px;h ...

  3. 使用ViewFlipper实现广告信息栏的上下翻滚效果

    import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.Gestu ...

  4. 【VBA】多条件去重

    Function kaidan(txt)Dim i As IntegerDim arrSet d = CreateObject("scripting.dictionary")For ...

  5. shell 部分语法

    语法: variable_name=${variable_name:-xxxx} 如果variable 已经有值,则不被新值覆盖,否则将新值赋给variable split命令切割文件

  6. androidstudio导入新项目build tools不符合问题解决

    问题描述:从网上或者其他地方拷贝来完整代码导入androidstudio的时候,gradle过程显示build tools不符合 问题分析:你安装的SDK版本可能与其他人不一样,那么build的工具也 ...

  7. C基础知识(13)：内存管理

    如果事先不知道数组的具体长度,则需要动态分配内存.下面是例子. #include <stdio.h> #include <stdlib.h> #include <stri ...

  8. 【转】Linux curl命令详解

    [From]https://www.cnblogs.com/duhuo/p/5695256.html 命令:curl 在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一 ...

  9. HTTPS SSL TLS 相关理解

    1,在理解 HTTPS SSL TLS 之前先对常用的加密方式进行一个简述: (1),对称加密: 采用一个密钥,对明文进行加密生成密文,相反采用此密钥可对加密后的密文进行解密还原成明文. 代表算法有, ...

  10. eclipse中出现错误 Syntax error, insert "}" to complete Block

    结果原因如下 划红线的地方多出来类似于空格的占位符,也许这样看不清楚. 我们来显示空格.制表符和回车键. Window->Preferences->General->Editors- ...