css中各种居中的奇技淫巧总结
css中各种居中的奇技淫巧总结
第一种，在固定布局中比较常用的技巧设置container的margin：0 auto；
第二种（从布局中入手）
css
.outer{
height:200px;
width:200px;
background:gray;
position:relative;
}
.inner{
width:100px;
height:100px;
top:50%;
left:50%;
background:black;
position:absolute;
margin-left:-50px;
margin-top:-50px;
}
html
<div class="outer">
<div class="inner"></div>
</div>
效果
第三种；单行文字居中
.info{
/*
1.前提设置固定的高
2.只能有一段文字
*/
height:100px;
line-height:100px;
border:1px solid blue;
text-align:center; /*如要要垂直居中的话就加上它把*/
}
第四种
table布局
<table style="width: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
这个也是可以居中的滴呀
</td>
</tr>
</table>
也可以改成是我们的div
css：
.outer{
display:table;
width:100%;
}
.inner{
display:table-cell;
text-align:center;
vertical-align:middle;
/*而且：
水平和垂直方向都居中了滴呀
*/
}
html
<div class="outer">
<div class="inner">居中</div>
</div>
第五种：translate
css
.center{
position:fixed;
top:50%;
left:50%;
background:#000;
width:50%;
height:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
}
附带兼容性写法：
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
html
<body>
<div class="center"></div>
</body>
第六种：flex布局
body{
display:flex;/*flex布局方式*/
display:-webkit-flex;
align-items:center; /*水平方向上*/
justify-content:center;/*垂直方向上的*/
}
.info{
height:200px;
width:200px;
background:gray;
}
css中各种居中的奇技淫巧总结的更多相关文章
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
- css中的居中问题
前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...
- CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
- CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
- css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...
- CSS中各种居中的问题
1.元素水平居中 1.1 在父元素上使用text-align: center; father { text-align: center; } 1.2 margin: 0 auto; 在上一个问题中,我 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- css中的居中的方法
一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...
- CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...
随机推荐
- WebRTC手记Channel概念
转载请注明出处:http://www.cnblogs.com/fangkm/p/4401075.html 前面两篇博文完整地介绍了WebRTC音视频的采集模块,接下来应该开始介绍关键的音视频编码模块. ...
- winform学习1-----理解小概念-20160506
panel属性,dock:获取或设置控件停靠到父容器的哪一个边缘. none,right,left,fill(完全填充),top C#默认窗体大小设置:maximumsize 窗体最大值 minimu ...
- 李洪强 - C语言8-Scanf函数
C语言的scanf函数 一.变量的内存分析 (一)字节与地址 ①. 内存以字节为单位 每个字节都有自己的内存地址,根据地址就可以找到该字节.整个内存相当于一整个酒店,而酒店以房间为单位,在这里每个房间 ...
- ubuntu 14.04安装
最近想搞spark.没有集群环境,想先在单机上跑.但是两年前一直用到现在的virtualbox已经太老,很多源都停更了.所以准备装ubuntu14.04. 0. 更新源.163的源有问题,用的是soh ...
- nodejs:grunt使用合并压缩的基本使用
一.模块化历史 1,nodejs出现:主要解决后端js规范 2,commonjs:这个组织出来一些服务器规范 3,后端规范commonjs应用升级到前端commonjs2:cmd规范(seajs)和完 ...
- JavaScript系列：函数 自执行 表达式 声明 定义
可用方式 (function($) {})(jQuery); !function( $ ){}(jQuery); +function( $ ){}(jQuery); -function( $ ){}( ...
- css里设置一个div在顶部固定,不随滚动条滚动而滚动
<div style="border:1px solid red;position:fixed;top:0px;float:inherit;width:100%">删除 ...
- oracle sql日期比较
oracle sql日期比较:在今天之前: select * from up_date where update < to_date('2007-09-07 00:00:00','yyyy-mm ...
- [IT思考]技术领先对手多少算好？
坦白讲,很多做技术的公司,总是觉得技术越“牛”越好.但是,历史也曾经出现过,很多公司技术的确很棒,但是市场反响一般(待补充案例).结果可想而知. 要知道,每一个新技术,尤其是业界领先的新技术,需要不少 ...
- Web 在线文件管理器学习笔记与总结（3）创建文件
① 创建文件 a. 文件名的合法性:不能包含 \/:*"<>| 等特殊字符 b. 检测当前目录下是否存在同名文件,如果存在提示请重命名后创建,如果不存在则直接创建 index.p ...