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. GROUP BY 子句 和 ORDER BY子句连用注意

    ORDER BY一定要放到GROUP BY后面 并且 ORDER BY 里面的字段必须包含在GROUP BY 里面

  2. unreal4特性介绍

    原文地址:   https://www.unrealengine.com/products/unreal-engine-4     unreal enginer介绍 我的UE4学习(一) 你曾想过用连 ...

  3. springboot 之 controller

    添加一个testController的java 类,部分代码 注解标记这是一个controller,配置路径,自动加载配置. 注入的方式有@Autowired 和@Resource 二者的区别是 @A ...

  4. 2014-10-22 NOIP模拟赛

    1 1 .传教士 (bishop) 问题描述:panzhili 王国的疆土恰好是一个矩形,为了管理方便,国王 jjs 将整个疆土划分成 N*M 块大小相同的区域.由于 jjs 希望他的子民也能信教爱教 ...

  5. 如何使用Xshell连接VMware上的Linux虚拟机

    前序:最近开始研究Hadoop平台的搭建,故在本机上安装了VMware workstation pro,并创建了Linux虚拟机(centos系统),为了方便本机和虚拟机间的切换,准备使用Xshell ...

  6. 基于SpringBoot构建分模块项目

    前言 步骤过于详细,多图慎入!!! 假设一个场景,要开发一个4s店维修部的办公系统,其功能有:前台接待,维修抢单,财务结算,库存管理.于是我们创建一个项目balabalabala写完交工. 一段时间后 ...

  7. java.lang.NoClassDefFoundError: com/sun/tools/javac/processing/JavacProcessingEnvironment

    最近项目用到了java程序动态编译java源文件,运行程序一直报错,提示错误如下: Can't initialize javac processor due to (most likely) a cl ...

  8. Ajax案例：异步加载后台订单详情信息

  9. 登录案例version1 基本登录+验证码

    package com.frxx.web.servlet; import com.frxx.domain.User; import com.frxx.service.impl.UserServiceI ...

  10. Centos7.x 安装 pptp

    VPN 1:检查是否支持PPTP #返回OK && echo ok ok 2:安装ppp yum install -y ppp 3:导入EPEL源 rpm -ivh http://dl ...