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. 漫画：深入浅出 ES 模块

    本文来自网易云社区. 本文翻译自:ES modules: A cartoon deep-dive ES 模块为 JavaScript 提供了官方标准化的模块系统.然而,这中间经历了一些时间 —— 近 ...

  2. Oracle判断某个表是否存在的方法

    在SQL中,我们常常使用if exists来判断一个表或某个对象是否存在,例如:  IF EXISTS (SELECT * FROM sys.tables WHERE name = 'CODE_BMD ...

  3. 运行Spark程序的几种模式

    一. local 模式 -- 所有程序都运行在一个JVM中,主要用于开发时测试    无需开启任何服务,可直接运行 ./bin/run-example 或 ./bin/spark-submit 如:  ...

  4. SqlConnectionStringBuilder的用法

    SqlConnectionStringBuilder提供了一个很好的构建SQL连接字串的方式.不多说,见代码: SqlConnectionStringBuilder builder = new Sql ...

  5. ignoring option MaxPermSize=256m; support was removed in 8.0 - unsupported JVM property

    MaxPermSize 在JVM8 中已经被删除. 可以使用 JAVA_OPTS="-Xms1303m -Xmx1303m -XX:MaxPermSize=256m 参考 https://b ...

  6. VMware workstation 14 安装 iOS虚拟机

    https://03k.org/vmware-macos.html https://jingyan.baidu.com/article/363872ec206a356e4ba16f30.html 1. ...

  7. dom4j解析简单的xml文件 解析元素并封装到对象

    package cn.itcast.xml; import cn.itcast.domain.Book; import org.dom4j.Document; import org.dom4j.Doc ...

  8. spring 公用异常处理

    1. 采用spring boot注解方式,如果采用swagger的话会导致swagger不可用 1.1  spring 配置如下 #出现错误时, 直接抛出异常 spring.mvc.throw-exc ...

  9. python3的encode()和decode()

    python3的encode()和decode() 在python3的内存中. 在程序运行阶段. 使⽤用的是unicode编码. 因为unicode是万国码. 什么内容都可以进行显示. 那么在数据传输 ...

  10. spring和springmvc是单例还是多例

    这么说其实不规范 spring的bean    默认是单例 springmvc的controller    默认是单例 所以最好不要在controller里定义成员变量 都可通过注解 @scope=p ...