1.水平居中margin 0 auto;（浮动元素除外）

　　这个属性在网页制作的过程中是经常被用到的，一般情况下页面的版心你就可以看到它。

<style>

        .father {

            width: 400px;

            height: 400px;

            background-color: pink;

        }

        .son {

            width: 200px;

            height: 200px;

            background-color: skyblue;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">

        </div>

    </div>
</body>

效果图：

2.position定位实现垂直居中(一)；

position具有兼容性好的特点，在网页布局中建议能使用定位，最好不要选择浮动来布局。下面这个方法局限性在于宽高。

<style>

        .father {

            position: relative;

            width: 200px;

            height: 200px;

            margin: 0 auto; /* 父盒子居中 */

            background-color: pink;

        }

        .son {

            position: absolute;

            width: 100px;

            height: 100px;

            top: 50%;

            left: 50%;

            margin-top: -50px;

            margin-left: -50px;

            background: skyblue;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">

        </div>

    </div>

</body>

3.position定位实现垂直居中(二)；

这个方法不用受到宽高的限制，非常好用，我布局的时候经常用到它

    <style>

        .father {

            position: relative;

            width: 200px;

            height: 200px;

            margin: 0 auto; /* 父盒子居中 */

            background-color: pink;

        }

        .son {

            position: absolute;

            width: 100px;

            height: 100px;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

            background: skyblue;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">

        </div>

    </div>

</body>

4.position定位实现垂直居中(三)；

在这之前我还不会使用这个方法 ，我是看别人的博客学习到的，在这里感谢他了。

<style>

        .father {

            position: relative;

            width: 200px;

            height: 200px;

            margin: 0 auto; /* 父盒子居中 */

            background-color: pink;

        }

        .son {

            position: absolute;

            width: 100px;

            height: 100px;

            top: 50%;

            left: 50%;

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

            background: skyblue;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">

        </div>

    </div>

</body>

　　效果图都是一样的，在这里我就上传一张了啦 。有的朋友可能会问：‘你把盒子里的内容换成图片，内容就不一样了鸭‘。开始我是打算把里面的内容换成图片的，原谅我偷懒了。

5.CSS3新特性居中：

<style>

        .father {

            display: flex;

            justify-content: center;

            align-items: center;

            width: 200px;

            height: 200px;

            margin: 0 auto; /*父盒子居中 */

            background-color: pink;

        }

        .son {

            width: 100px;

            height: 100px;

            background: skyblue;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">

        </div>

    </div>

</body>

小结：我这里分享的是一些比较常用的CSS居中方式，没有说到的可以到评论区留言 谢谢大家。

常用的CSS居中方式的更多相关文章

  1. 常用的Css命名方式

    常用的Css命名方式: CSS命名规范: 1.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:p ...

  2. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  3. 15种css居中方式

    1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中.此方法对内联元素(inline), 内联块(inline-block), ...

  4. css居中方式总结

    方法一: line-height <div class="vertical" style="width:200px;height:200px;border:2px ...

  5. CSS居中的常用方式以及优缺点

    前言 居中是页面开发中经常遇到的问题. 使用合适的.简单的.兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题. text-align:center 来看这个例子,一张图片和文字进行居中.如 ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. 【基础】这15种CSS居中的方式，你都用过哪几种？

    简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...

  8. css3种引入方式,样式与长度颜色,常用样式,css选择器

    # CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...

  9. 第212天：15种CSS居中的方式，最全了

    CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录 ...

随机推荐

  1. 数据库路由中间件MyCat - 使用篇（3）上篇

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 全局序列号 数据切分后,原有的关系数据库中的主键约束在分布式条件下将无法使用,因此需要引入外部机制保证数据唯 ...

  2. Swoole WebSocket 的应用

    目录 概述 代码 小结 概述 这是关于 Swoole 学习的第三篇文章:Swoole WebSocket 的应用. 第二篇:Swoole Task 的应用 第一篇:Swoole Timer 的应用 什 ...

  3. Codeforces Round #401 (Div. 2)【A,B,C,D】

    最近状态极差..水题不想写,难题咬不动..哎,CF的题那么简单,还搞崩了= =.真是巨菜无比. Codeforces777A 题意:略. 思路: 构造出3!次变换,然后输出就好. Code: #inc ...

  4. ERROR 1366 (HY000): Incorrect string value: '\xB3\xA4\xC9\xB3' for column

    在用以下方法之前,请先执行下面命令查看. show variables like 'character%';  ——查看所有编码方式 show create table table_name;   — ...

  5. [Android]简略的Android消息机制源码分析

    相关源码 framework/base/core/java/andorid/os/Handler.java framework/base/core/java/andorid/os/Looper.jav ...

  6. 图像分类丨Inception家族进化史「GoogleNet、Inception、Xception」

    引言 Google提出的Inception系列是分类任务中的代表性工作,不同于VGG简单地堆叠卷积层,Inception重视网络的拓扑结构.本文关注Inception系列方法的演变,并加入了Xcept ...

  7. cas 单点登录服务端客户端配置

    首先,下载 cas-server-3.5.2-release http://pan.baidu.com/s/1GJ8Gs cas-client-3.2.1-release http://pan.bai ...

  8. .net笔试题二（填空题、选择题）

    1.面向对象的语言具有_______性.________性._______性答:封装.继承.多态. 2.能用foreach遍历访问的对象需要实现 ____________接口或声明__________ ...

  9. Servlet中文件上传的几种方式

    上传文件,因为上传的都是二进制数据,所以在Servlet中就不能直接用request.getParameter();方法进行数据的获取,需要借助第三方jar包对上传的二进制文件进行解析.常用的方式如下 ...

  10. [拾零]C/C++_代码复用的实现_静态链接库_动态链接库_使用.def导出

    1 静态链接库 1.1 创建静态链接库: 1.在VC6中创建项目:Win32 Static Library 2.在项目中创建两个文件:xxx.h 和 xxx.cpp 3.编译 1.2 使用静态链接库 ...