常用CSS居中
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居中的更多相关文章
- 理解CSS居中
我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...
- 常用的CSS居中方式
1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...
- CSS居中的常用方式以及优缺点
前言 居中是页面开发中经常遇到的问题. 使用合适的.简单的.兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题. text-align:center 来看这个例子,一张图片和文字进行居中.如 ...
- 各种div+css居中方式调整(转载)
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- 【基础】这15种CSS居中的方式,你都用过哪几种?
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- 常用css属性
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | nor ...
- css居中小结
从css入门就开始接触,无所不在的,一直备受争议的居中问题. css居中分为水平居中和垂直居中,水平居中方式也较为常见和统一,垂直居中的方法就千奇百怪了. 博客原文地址:Claiyre的个人博客 ht ...
- 第212天:15种CSS居中的方式,最全了
CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
随机推荐
- 表格不被内容撑大,且超出的内容变为省略号(css)
今天写代码,发现表格会被内容撑大,影响到了网页的整体布局. 百度了一解决方法,下面是代码和我的备注 table{table-layout: fixed;} //固定表格 table td ...
- RabbitMQ headers Exchange
Headers Exchange headers也是一种交换机类型,但是在rabbitmq官网中的教程中并没有说到.资料也很少,但是找一找总会有的. headers与direct的模式不同,不是使用r ...
- winston写日志(译)
使用 有两种方式去使用winston,直接通过默认的logger,或者实例化自己的Logger,前者设计的目的是在你的应用程序中共享logger比较方便. 使用默认Logger 使用默认的logger ...
- 在Application中集成Microsoft Translator服务之翻译语言代码
Microsoft Translator支持多种语言,当我们获取服务时使用这些代码来表示我们是使用哪种语言翻译成什么语言,以下是相关语言对应的代码和中文名 为了方便我已经将数据库上传到云盘上,读者可 ...
- 深入理解javascript原型和闭包(6)——继承
为何用“继承”为标题,而不用“原型链”? 原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆.而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中 ...
- PHP如何通过Http Post请求发送Json对象数据?
因项目的需要,PHP调用第三方 Java/.Net 写好的 Restful Api,其中有些接口,需要 在发送 POST 请求时,传入对象. Http中传输对象,最好的表现形式莫过于JSON字符串了, ...
- Alpha版本十天冲刺——Day 1
站立式会议 会议总结 队员 今天完成 遇到的问题 明天要做 感想 鲍亮 α版本接口文档初步编写,任务统筹 绘制燃尽图出错 学习http资源访问,服务器请求接口demo测试 作为PM,之前对团队具体要做 ...
- jenkins自动化构建iOS应用配置过程中遇到的问题
最近配置jenkins来自动构建iOS应用,期间遇上不少问题.在这里分享给大家,也给自己留个底,方便下次解决问题. 首先说明下基本情况,我们因为部署jenkins的机器不是Mac,所以不能安装Xcod ...
- 上个项目的一些反思 I
最近一直在反思之前的项目,发现了很多问题.比如数据安全... 虽然项目需求是只展示最新的数据,所以几乎没用什么本地存储.除了通讯录和用户的Token. 用户通讯录另表,今天反思下用户的Token的存储 ...
- python之路四
内建函数 内建函数详解: 1. abs(x) abs()函数返回数字(可为普通型.长整型或浮点型)的绝对值.如果给出复数,返回值就是该复数的模.例如: >>>print abs(-2 ...