1.flex方法:

.center_fix
{
display:flex;
align-items:center;
justify-content: center;
}

具体flex方法教程:可以参见软老师的——》Flex 布局教程:实例篇

2.position:absolute

.center
{ position: absolute; top:50%; left:50%; width: 100px; height:100px; margin-top: -50px; margin-left:-50px; background: teal; }

3.position: fixed;和上一个absolute方法差不多

.center{
position: absolute;
top:50%;
left:50%;
width: 100px;
height:100px;
margin-top: -50px;
margin-left:-50px;
background: teal;
}

4.

.center{
position: fixed;
width: 100px;
height: 100px;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: teal;
}

5.

.center{
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: teal;
}  

6.CSS3盒模型display:-webkit-box

.center{
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
width:100px;
height:100px;
background:teal;
color:black;
}

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

  1. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  2. 常用的CSS居中方式

    1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...

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

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

  4. 各种div+css居中方式调整(转载)

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

  5. 【基础】这15种CSS居中的方式,你都用过哪几种?

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

  6. 常用css属性

    一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | nor ...

  7. css居中小结

    从css入门就开始接触,无所不在的,一直备受争议的居中问题. css居中分为水平居中和垂直居中,水平居中方式也较为常见和统一,垂直居中的方法就千奇百怪了. 博客原文地址:Claiyre的个人博客 ht ...

  8. 第212天:15种CSS居中的方式,最全了

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

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. 【poj2065】 SETI

    http://poj.org/problem?id=2065 (题目链接) 题意 题意半天看不懂..给你一个素数P(P<=30000)和一串长为n的字符串str[].字母'*'代表0,字母a-z ...

  2. oracle---jdbc--laobai

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  3. BZOJ3110: [Zjoi2013]K大数查询

    喜闻乐见的简单树套树= =第一维按权值建树状数组,第二维按下标建动态开点线段树,修改相当于第二维区间加,查询在树状数组上二分,比一般的线段树还短= =可惜并不能跑过整体二分= =另外bzoj上的数据有 ...

  4. web前端历史的总结

    1.早期的前后一体,前端和后端是一个整体. 2.早期的后端mvc概念,前端只是后端mvc里面的视图层 (laravel就是mvc) 3.ajax技术改变了一切 2004年 Gmail 2005Goog ...

  5. web service 学习

    是什么? 是一种远程调用技术,这种技术提供一些接口,这些接口实现让客户端和服务端进行通信和数据交换,并且让通信和交换与平台和开发语言无关.也可以说是提供了许多函数.客户端调用服务端的函数. 远程调用: ...

  6. visio二次开发——图纸解析

    (转发请注明来源:http://www.cnblogs.com/EminemJK/) visio二次开发的案例或者教程,国内真的非常少,这个项目也是花了不少时间来研究visio的相关知识,困难之所以难 ...

  7. go智能提示(重要)

    使用VIM开发go程序时,智能提示是一个大问题. 最终解决方案是使用 YCM,它是使用 gocode 来进行智能提示的.一切配置好之后,你会发现标准库和第三方库都可以智能提示,但自己写的包却不能,猜想 ...

  8. 如何给Apache添加虚拟路径和虚拟主机?

    在本地开发,一般只用一个Apache服务器,然后通过配置文件实现多个站点访问,要么是“虚拟路径(别名)”的形式,要么是“虚拟主机”的形式,相关配置参考如下: 说明:我给Apache设置的端口为:,即  ...

  9. Alpha版本十天冲刺——Day 5

    站立式会议 会前小侃:今天是双11,也是恰逢组内秋鑫同学生日,本组同学祝他双11生日快乐.天气好冷,注意保暖. 会议总结 队员 今天完成 遇到的问题 明天要做 感想 鲍亮 json数据解析学习,完成注 ...

  10. poj 1655

    这道题我有很多要说 首先是基础的解题思路: 树形dp(dfs)用dp[i]保存以i为根结点的子树的大小(含i) balance(i)=max{n-dp[i],max{dp[j]}(j is a son ...