不定高宽的元素居中的方法
不定宽高情况下的居中方法
1、水平居中
方法一:
父层:text-align:center;
子层:display:inline-block;
3、水平垂直居中
注意:IE6、7不兼容inline-block,解决办法:*zoom:1;*display:inline;
方法二:
表格的内容是垂直居中的,所以可以利用table来做,但它里面的内容是行内元素才行
table{position:absolute;width:100%;height:100%;text-align:center;}
.test{display:inline-block;*zoom:1;*display:inline;}
<table>
<tbody>
<tr>
<td>
<div class="test">
水平垂直居中了吧<br>
两行文字哦
</div>
</td>
</tr>
</tbody>
</table>
方法三:
仿效表格的做法,td默认设置display:table-cell;tbody默认vertical-align:middle;tr、td继承tbody的设置
table-cell属性值可以让元素渲染为表格单元格,轻松实现让子元素水平垂直居中
父层:display:table-cell;
text-align:center;
vertical-align:middle;
子层:display:inline-block;
<div class="wrap">
<div class="test">
水平垂直居中了吧<br>
两行文字哦
</div>
</div>
方法四:使用transform实现(IE6/7/8不兼容)
一般而言,百分比的单位都是相对父元素来计算,而transform比较特别,它是相对于自身的宽高来计算的。
前面的定宽高下利用transform:translate()来居中,同理,这里也可以这么干。
.fu{
position:absolute;top;50%;left;50%;
transform:translate(-50%;-50%);
-webkit-transform:translate(-50%;-50%);
-moz-transform:translate(-50%;-50%);
-ms-transform:translate(-50%;-50%);
-o-transform:translate(-50%;-50%);
}
<div class="fu">
<div class="zi">dddddd</div>
</div>
方法五:
弹性盒模型(css3里面的内容,低版本IE不支持)
.test_box {
display: -moz-box;
display: -webkit-box;
display: -o-box;
display: box;
width: 400px;
height: 250px;
padding: 20px;
background: #f0f3f9;
-webkit-box-pack:center;//水平居中
-webkit-box-align:center;//垂直居中
}
.list {
padding: 0 1em;
font: bold 36px/120px monaco;
text-shadow: 1px 1px #eee;
background-color: red;
border:1px solid;
}
<div class="test_box">
<div class="list">1</div>
<div class="list" style="line-height:200px;">2</div>
<div class="list">3</div>
</div>
总的来说,要居中可以考虑几个属性以及它们之间的配合使用
text-align:center;
display:inline-block;
display:table-cell;
vertical-align:middle;
transform:translate();
转载于:https://www.cnblogs.com/dragonlong/p/4648283.html
不定高宽的元素居中的方法相关推荐
- 10 个CSS实现元素居中的方法汇总
英文 | https://javascript.plainenglish.io/10-css-tricks-you-should-know-for-centering-elements-61092d3 ...
- css元素居中实现方法
关于css元素居中,查阅资料和实验有以下几种方法: 水平居中 1.最简单的在父元素中加入 text-align:center .这条语句不用关心子元素是否有固定的尺寸大小. 但只能对图片,按钮,文字等 ...
- HTML 元素居中的方法
网址:http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html 1. 元素的定位的方法选择 :absolute . 2. 给定元素的宽和高 ...
- electronjs设置宽度_Js操作DOM元素及获取浏览器高宽的简单方法
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...
- 三议(巧用:before和inline-block伪元素解决)跨浏览器不定长宽,中心为基点,百分比定位~...
ie6.ie7支持expression,虽然效率不高,但对于解决一些特别的css布局问题非常有用, 现代浏览器(chrome|firefox|opera|safari等)支持新的盒模型,以及一些非常有 ...
- css元素居中方法归纳
水平和垂直方向都可居中 统一HTML代码: <div class="outer"><div class="inner"></div ...
- CSS常用的元素居中方法
参考:CSS: 常用的元素居中方法 CSS居中布局总结 1.水平居中 (1)文本水平居中 text-align: center; (2)块级元素水平居中 ①设置margin margin: auto; ...
- css图片居中_网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...
- html中元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求.下边将五种常用的居中方法进行总结. 1:原始图(父子元素无border,无padding): 2:实现居中效果: 一:使用margin进行固定长度的 ...
最新文章
- mysql alter engine_MySQL_mysql下修改engine引擎的方法,修改my.ini,在[mysqld]下加上 - phpStudy...
- Spark 案例(依据电商网站的真实需求)
- Python语言学习之数值、小数、空格那些事:python和数值、小数、空格的使用方法之详细攻略
- excel删除重复数据保留一条_VBA利用字典删除重复行,保留唯一值
- 【渝粤教育】国家开放大学2018年春季 0688-21T老年精神障碍护理 参考试题
- C#创建简单的验证码
- Android ——SoundPool播放音频
- 在SQL Server中比较VARCHAR(max)与VARCHAR(n)数据类型
- 51NOD-1090-3个数和为0
- 正弦波及FFT变换py程序
- Django项目于之在线教育平台网站的实战开发(一)
- wampServer:橙色变绿色
- 计算机会不会取代人类英语作文,高中英语作文:机器代替人?
- unity瓦片地图调整图片大小
- web哪里有php文件,web文件管理器
- 对手机网络状态改变时的监听
- sv中program和module区别
- python全栈开发书籍推荐_python全栈开发学习 01
- 【更新】全新的数据填报,更强的BI分析,Wyn Enterprise V3.0 Update 2 发布
- 2013的联想台式计算机,联想台式电脑选购常识_联想台式电脑使用常识 -真快乐商城...