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. nginx 反向代理

    nginx 反向代理 vim nginx.conf http { ..... upstream "tomcatweb" { server 172.30.13.199:8080; s ...

  2. ReactNative 当前url和cookies的获取

    前面大概介绍了react-native的运行helloword级别的入门,所以之后简单的东西就不写了,毕竟官网上都能够找到. reactnative官网:https://facebook.github ...

  3. UOJ#67. 新年的毒瘤

    传送门 练习一下Tarjan的模板. 求一下割点,然后加个约束条件判一下特殊点,剩下的就是所求点. //UOJ 67 //by Cydiater //2016.10.27 #include <i ...

  4. 迅雷9、迅雷极速版之迅雷P2P加速:流量吸血鬼?为什么你装了迅雷之后电脑会感觉很卡很卡?

    原文地址:http://www.whosmall.com/post/90 关闭极速版迅雷ThunderPlatform.exe进程 ThunderPlatform.exe目的:利用P2P技术进行用户间 ...

  5. New Features In SNMPv3 - SNMP Tutorial

    30.12 New Features In SNMPv3 We said that version 3 of SNMP represents an evolution that follows and ...

  6. Java开发面试总结

    Java开发面试总结.. ----------------------- java 基础知识点这一块: 1.面向对象的三大特征.(继承,封装,多态) 1.1 在什么样的场合下面会使用到继承 1.2 什 ...

  7. QQ空间爬虫最新分享,一天 400 万条数据(附代码地址)

    http://mp.weixin.qq.com/s?__biz=MzAxMjUyNDQ5OA==&mid=2653552228&idx=1&sn=e476bf23556406c ...

  8. 在Application中集成Microsoft Translator服务之获取访问令牌

    我在这里画了一张图来展示业务逻辑 在我们调用microsoft translator server之前需要获得令牌,而且这个令牌的有效期为10分钟.下表列出所需的参数和对于的说明 参数 描述 clie ...

  9. CentOS7下搭建邮件服务器(dovecot + postfix + SSL)

    CentOS   花了基本上两天的时间去配置CentOS7下的邮件服务器.其中艰辛太多了,一定得总结下. 本文的目的在于通过一系列配置,在CentOS 7下搭建dovecot + postfix + ...

  10. [译]使用branch

    这篇文章将介绍Git分支. 首先, 看看如果创建分支, 这就像是request一个新的项目历史. 接着, 来看看git checkout是如果能被用来选择一个分支的. 最后, 学习用git merge ...