css 水平垂直居中 & vertical-align
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
已知宽度的元素居中
position定位 + margin负值
<style type="text/css">
* {
padding: 0;
margin: 0;
} .wrapper {
width: 500px;
height: 500px;
background: #f90;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
margin: auto;
/*绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中*/
/*如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多*/
} .content {
width: 100px;
height: 200px;
background: #0f8;
position: absolute;
/*position: absolute基于第一个不是position:static的父级元素定位*/
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -100px;
/*绝对定位 + 左50% + margin左:宽度一半的负值 可以做到水平居中 右也可以*/
/*绝对定位 + 上50% + margin上:高度一半的负值 可以做到垂直居中 底部也可以*/
}
</style> <div class="wrapper">
<span class="content"></span>
</div>
未知宽度的元素居中
<style type="text/css">
* {
padding: 0;
margin: 0;
} .wrapper {
width: 500px;
height: 500px;
background: #f90;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
margin: auto;
/*绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中*/
/*如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多*/
} .content {
width: 100px;
height: 200px;
background: #0f8;
position: absolute;
/*position: absolute基于第一个不是position:static的父级元素定位*/
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/*transform变化、使...变形、转换;transform属性应用于元素的2D或3D转换。这个属性允许你将元素移动,旋转,缩放,倾斜*/
/*translate平移,是transform的属性值的一部分*/
/*transition过渡、转变;可多个样式的变换效果*/
}
</style>
<div class="wrapper">
<span class="content"></span>
</div>
`div`中`img`图片垂直居中
可以用`vertical-align:middle`,但是这个属性只有在`inline-block`类型(`inline`也有影响)的元素身上起作用。
方法一:图片`vertical-align:middle` + 父元素的`height`与`line-height`一致
<style type="text/css">
* {
padding: 0;
margin: 0;
} .wrapper {
height: 300px;
line-height: 300px;
width: 300px;
margin: 100px auto;
background: #f90;
text-align: center;
} .wrapper img {
width: 150px;
vertical-align: middle;
}
</style>
<div class="wrapper">
<img src="data:images/1.jpg" alt="美女" title="美女" />
</div>
<style type="text/css">
* {
padding: 0;
margin: 0;
} .wrapper {
width: 300px;
height: 300px;
background: #f90;
text-align: center;
vertical-align: middle;
display: table-cell;
} .wrapper img {
width: 150px;
}
</style>
<div class="wrapper">
<img src="data:images/1.jpg" alt="美女" title="美女" />
</div>
css 水平垂直居中 & vertical-align的更多相关文章
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- css 水平垂直居中的方法总结
在项目中经常会遇到设置元素水平垂直居中的需求.而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用. 以下所举的例子都以一个html为准,这里规定好一些公用样式. body { bac ...
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
- 把简单做好也不简单-css水平垂直居中
44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
- CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
- css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- 介绍一种css水平垂直居中的方法(非常好用!)
这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...
随机推荐
- Selenium: 利用select模块操作下拉框
在利用selenium进行UI自动化测试过程中,经常会遇到下拉框选项,这篇博客,就介绍下如何利用selenium的Select模块来对标准select下拉框进行操作... 首先导入Select模块: ...
- apache配置https重定向
apache配置https重定向 一.总结 一句话总结: 网上找不到答案的原因是因为没有精准的描述问题,没有把问题描述清楚:尽量把关键词描述清楚 1.apache将80端口重定向443的具体步骤(在 ...
- JavaScript WebSocket 使用总结
翻看之前写的 Highcharts使用总结 和 前后台交互之传参方式,想对 WebSocket 单独写一个使用总结. 一.认识 WebSocket . WebSocket 是 H5 新出的一种协议, ...
- 关于Mysql-unknow-column-in-where-clause
写在前边: 已经很久不更新了啊,整个2月份几乎没有遇到什么新鲜事.直到昨天我又犯了一次傻,貌似只有我犯傻的时候才有材料可以跟大家分享- 问题表现: mysql 报错: unknow column 's ...
- SQL-W3School-函数:SQL ROUND() 函数
ylbtech-SQL-W3School-函数:SQL ROUND() 函数 1.返回顶部 1. ROUND() 函数 ROUND 函数用于把数值字段舍入为指定的小数位数. SQL ROUND() 语 ...
- MS-MSMQ:百科
ylbtech-MS-MSMQ:百科 MicroSoft Message Queuing(微软消息队列)是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可 ...
- APPSCAN使用外部浏览器的方法
在使用appscan扫描时,自带浏览器可能存在兼容性问题(比如HTML5),故需要用到其他浏览器.在做139邮箱HTML5项目,需要使用chrome浏览器进行扫描.因此分享下如何使用外部浏览器,将之前 ...
- 根据DELTA自动生成SQL语句
上传客户端的CLIENTDATASET.delta到服务器的clientdataset.data,服务端解析clientdataset的数据生成相应的SQL语句. 相对于直接调用datasetprov ...
- 过滤emoji表情的方法
public static function replaceEmoji($str) { $str = preg_replace_callback( '/./u', function (array $m ...
- 修改NGUI 3.11 的控件 inputfileld hide input 属性bug
1.勾选hideinput属性后,输入中文,会出现,无法显示的问题. 2.勾选hideinput属性后,密码框会出现第一个字母被吃掉的问题 解决方案:控件都不要勾选hideinput属性,代码做如下修 ...