元素、文字垂直居中
2017-02-25 12:00
274 查看
让一个元素垂直居中是我们开发经常遇到的问题,下述整理各种情况:
transform属性值
transform-origin属性的值
上述两者,效果会有所差异
div垂直居中
场景设定:让一个50px*50px的Div在一个200px*200px的Div中垂直居中。<style> #content { width: 200px; height: 200px; border: 1px dashed #333; } #content div{ width: 50px; height: 50px; border: 1px solid #f00; } </style> <div id="content"> <div class="mid"></div> </div>
绝对定位方式
#content { position: relative; } div.mid { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
设置外边距
div.mid { position: relative; top: 50%; left: 50%; margin: -25px 0 0 -25px; /*外边距为自身宽高的一半*/ }
未知容器的宽高,利用transform属性
div.mid { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); /*向左上角移动25px,25px*/ }
属性 | 说明 |
---|---|
transform | 指定应用的变换功能 |
transform-origin | 指定变换的起点(默认元素的中心点) |
值 | 说明 |
---|---|
translate(<长度值,百分数值>)、translateX、translateY | 在水平方向、垂直方向或者两个方向上平移元素 |
scale(<数值>)、scaleX、scaleY | 在水平方向、垂直方向或者两个方向上缩放元素 |
skew(<角度>)、skewX、skewY | 在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度 |
rotate | 旋转角度 |
matrix(4~6个数值,逗号隔开) | 指定自定义变换。 |
值 | 说明 |
---|---|
<%> | 指定元素x轴或者y轴的起点 |
<长度值> | 指定距离 |
left、center、right | 指定x轴上的位置 |
top、center、bottom | 指定y轴上的位置 |
通过设置容器的flexbox居中方式
#content { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ }
文字垂直居中
场景设定:让一个50px*50px的Div在一个200px*200px的Div中垂直居中。<style> #content { width: 200px; height: 200px; border: 1px dashed #333; } </style> <div id="content"> <span>垂直居中,哒啦哒啦,就是它</span> </div>
line-height
#content { line-height: 200px; /*等于其height*/ } #content span { display: inline-block; /*设置为行内块*/ width: 200px; overflow: hidden; /*防止内容溢出*/ white-space: nowrap; text-overflow: ellipsis; }
dispaly:table
#content { display: table; } #content span { display: table-cell; vertical-align: middle; }
上述两者,效果会有所差异
相关文章推荐
- 51 css 图片文字同时垂直居中 z-index无效 父级元素塌陷 图片宽度自适应
- 文字或图片元素在DIV中垂直居中
- 利用display:table-cell让文字垂直居中(无论元素多少行)
- 元素、文字垂直居中
- 图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题
- 表单元素input、按钮、文字完美垂直居中对齐方法
- CSS实现文字或图片等元素垂直、水平、绝对定位居中技术
- 元素,单行文字或多行文字,图片 之 水平垂直居中的方法大全及例子分析
- 表单元素和文字垂直居中对齐的问题
- 表单元素input、按钮、文字完美垂直居中对齐方法
- 文字或图片元素在DIV中垂直居中
- 解决IE下select标签内文字不居中的文字(垂直),input元素不居中
- 表单元素input、按钮、文字完美垂直居中对齐方法
- 父元素 高度固定,如何使其中的文字垂直居中?
- 解决Firefox下input button内文字垂直居中
- 单行图片文字垂直居中问题――实战
- 多行文字垂直居中
- 行内元素与块级元素垂直居中
- css控制元素垂直和水平居中
- MFC EDIT 文字 垂直居中的方法