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. GitHub上最火爆！码代码不得不知的所有定律法则

    目录 介绍 定律 阿姆达尔定律 (Amdahl's Law) 布鲁克斯法则 (Brooks's Law) 康威定律 (Conway's Law) 侯世达定律 (Hofstadter's Law) 技术 ...

  2. 洛谷P2905 [USACO08OPEN]农场危机Crisis on the Farm

    P2905 [USACO08OPEN]农场危机Crisis on the Farm 题目描述 约翰和他的奶牛组建了一只乐队“后街奶牛”,现在他们正在牧场里排练.奶牛们分成一堆 一堆,共1000)堆.每 ...

  3. 如何在VMware workstation上创建Linux虚拟机

    由于需要使用Linux虚拟机部署Hadoop集群,故在win10系统上安装了VMware workstation 14,现将介绍如何在VMware workstation上创建Linux虚拟机.下面以 ...

  4. 道阻且长 莫失本心（我的OI之旅

    道阻且长 莫失本心      今天午睡醒来,发现自己发烧了.尽管穿的很厚,尽管今天的阳光如此明媚.身体还是由内而外地散发着冷意. 期末考已经结束了,接下来又是艰难而难忘的奥赛训练.(要到春节才能放假了 ...

  5. argparse 在深度学习中的应用

    argparse 介绍 argparse模块主要用来为脚本传递命令参数功能,使他们更加灵活. 代码: parser = argparse.ArgumentParser() #建立解析器,必须写 par ...

  6. ELK系列(1) - Elasticsearch + Logstash + Kibana + Log4j2快速入门与搭建用例

    前言 最近公司分了个ELK相关的任务给我,在一边学习一边工作之余,总结下这些天来的学习历程和踩坑记录. 首先介绍下使用ELK的项目背景:在项目的数据库里有个表用来存储消息队列的消费日志,这些日志用于开 ...

  7. CC14:集合栈

    题目 请实现一种数据结构SetOfStacks,由多个栈组成,其中每个栈的大小为size,当前一个栈填满时,新建一个栈.该数据结构应支持与普通栈相同的push和pop操作. 给定一个操作序列int[] ...

  8. Codeforces Round #562 (Div. 2) B. Pairs

    链接:https://codeforces.com/contest/1169/problem/B 题意: Toad Ivan has mm pairs of integers, each intege ...

  9. Codeforces 384E-线段树+dfs序

    如果这题只传到儿子不继续向下就是裸的dfs序+线段树,继续往下传的还改变正负号,我们可以根据它的层数来确定正负号 #include<bits/stdc++.h> #define inf 0 ...

  10. 基于.NetCore2.1。服务类库采用.Net Standard2.0，兼容.net 4.6.1消息推送服务

    基于.NetCore2.1.服务类库采用.Net Standard2.0,兼容.net 4.6.1消息推送服务 https://www.cnblogs.com/ibeisha/p/weixinServ ...