常用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 ...
随机推荐
- bzoj 4557: [JLoi2016]侦察守卫 树归
bzoj 4557: [JLoi2016]侦察守卫 设f[x][j]表示覆盖以x为根的子树的所有应该被覆盖的节点,并且以x为根的子树向下j层全部被覆盖的最小代价. 设g[x][j]表示与x距离大于j全 ...
- [C#] 使用NPOI将Datatable保存到Excel
using (table) { IWorkbook workbook = new HSSFWorkbook(); ISheet sheet = workbook.CreateSheet(); IRow ...
- iOS - 在工程中试玩状态模式
做了一个项目,项目中一个藏品详情界面针对不同用户,和用户所处于的状态的不同,展示的效果和操作的权限都会不同.想到了状态模式,从来没有用过,赶紧学一下然后用一用.期待兴奋 看了这么多的博客,终于找到一个 ...
- RDBMS DML DDL
RDBMS RDBMS 指的是关系型数据库管理系统. RDBMS 是 SQL 的基础,同样也是所有现代数据库系统的基础,比如 MS SQL Server, IBM DB2, Oracle, MySQL ...
- 文件夹锁定(Source)
文件夹锁定(Source)private void Lock(string folderPath){ try { string adminUserName = Environ ...
- 数据存储_SQLite (2)
SQL代码应用示例 一.使用代码的方式批量添加(导入)数据到数据库中 在ios项目中使用代码批量添加多行数据示例 代码示例: 1 // 2 // main.m 3 // 01-为数据库添加多行数据 4 ...
- AOP基本名词解释
- IBAction和IBOutlet
- IBAction: - 本质就是void - 能让方法具备连线的功能- IBOutlet - 能让属性具备连线的功能
- Silicon C8051F340之GPIO口配置与使用
一.背景: 很久前用过C8051,现在有相关需求需要重新使用C8051,然后发现一年前开发的相关经验都忘得 基本上差不多了.连最基本的GPIO口配置还得重新来看手册,所以有此文,做个记录,以备下次快速 ...
- hibernate4学习
1. 安装hibernatetools插件 2. 这个是篇测试文档 来自为知笔记(Wiz)