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. Golang : cobra 包简介

    Cobra 是一个 Golang 包,它提供了简单的接口来创建命令行程序.同时,Cobra 也是一个应用程序,用来生成应用框架,从而开发以 Cobra 为基础的应用.本文的演示环境为 ubuntu 1 ...

  2. CV codes代码分类整理合集 《转》

    from:http://www.sigvc.org/bbs/thread-72-1-1.html 一.特征提取Feature Extraction:   SIFT [1] [Demo program] ...

  3. codeforces986F Oppa Funcan Style Remastered【线性筛+最短路】

    容易看出是用质因数凑n 首先01个因数的情况可以特判,2个的情况就是ap1+bp2=n,b=n/p2(mod p1),这里的b是最小的特解,求出来看bp2<=n则有解,否则无解 然后剩下的情况最 ...

  4. luogu P2570 [ZJOI2010]贪吃的老鼠【二分+最大流】

    首先考虑只满足第一个条件,二分答案,把过期时间加上mid之后的2n个时间离散,老鼠拆成每个时间的,第i个时间第j个老鼠为id[i][j],连接(s,i,p[i]),对于离散后时间(g[j-1]~g[j ...

  5. 洛谷P2652 同花顺

    P2652 同花顺 题目背景 所谓同花顺,就是指一些扑克牌,它们花色相同,并且数字连续. 题目描述 现在我手里有n张扑克牌,但它们可能并不能凑成同花顺.我现在想知道,最少更换其中的多少张牌,我能让这 ...

  6. IT兄弟连 Java语法教程 Java平台的版本划分

    自从Sun公司推出Java以来,就力图使之无所不能.Java发展至今,按应用范围划分为3个版本,即Java SE.Java EE和Java ME,也就是SunOne(Open Net Environm ...

  7. JavaScript进阶 - 第3章 一起组团(数组)

    第3章 一起组团(数组) 3-1 一起组团(什么是数组) 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果 ...

  8. CF920F SUM and REPLACE 线段树

    给你一个数组a_i​,D(x)为x的约数个数 两种操作: 1.将[l,r]的a_i​替换为D(a_i) 2.输出∑​a_i ( l <= i <= r ) 当区间最大值<=2时,就不 ...

  9. Educational Codeforces Round 65 (Rated for Div. 2) D. Bicolored RBS

    链接:https://codeforces.com/contest/1167/problem/D 题意: A string is called bracket sequence if it does ...

  10. Codeforces Round #431 (Div. 2) B

    Connect the countless points with lines, till we reach the faraway yonder. There are n points on a c ...