- 浏览: 1093079 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
css里面用text-align:center加上margin:0 auto就可以实现水平居中了。
但是垂直居中却没有相应的css属性来设置。
方法一:通过 display:table 实现CSS垂直居中
而如果要设置元素能够垂直居中必须得将容器设置为display:table,
然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
方法二:通过 position + transform 实现CSS垂直居中
下面的代码利用css3的transform来实现垂直居中和水平居中:
注意:
1、父元素的 height 属性必须指定像素值
垂直居中元素的父元素的高度必须是一个固定值,例如:height: 60px; 。不能是auto,或是没有指定,或者是position为absolute时,高度设置为100%,这样高度仍然是0。此时,top 的 50%,仍然是0,就不起作用。
2、父元素除了 position 为 relative 外,无需其它修饰。
例如:不要加:text-align: center; 之类的修饰。
垂直居中
水平居中
水平且垂直居中
解释:
top:50%,当position设置为 relative 或 absolute 时,指元素的顶部到父元素的顶部的距离是父元素高度的一半。(所以父元素的高度不能为0,或可能引起父元素高度为0的任何CSS属性)此时并未垂直居中,因为元素本身也是有高度的。
transform: translateY(-50%),是指在垂直方向,向上移动元素自身高度的一半。
这两个属性结合使用,就可以达到使元素在父元素中垂直居中。
方法三:通过 display:flex 实现CSS垂直居中
随着越来越多浏览器兼容CSS中的flexbox特性,所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的,只是在flex-direction上有所差别,一个是row(默认值),另外一个是column。
引用请注明,
原文出处:https://www.iteye.com/blog/lixh1986-2513366
ref:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
https://blog.csdn.net/qq_33769914/article/details/97786549
https://www.cnblogs.com/clj2017/p/9293363.html
-
但是垂直居中却没有相应的css属性来设置。
方法一:通过 display:table 实现CSS垂直居中
而如果要设置元素能够垂直居中必须得将容器设置为display:table,
然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
方法二:通过 position + transform 实现CSS垂直居中
下面的代码利用css3的transform来实现垂直居中和水平居中:
注意:
1、父元素的 height 属性必须指定像素值
垂直居中元素的父元素的高度必须是一个固定值,例如:height: 60px; 。不能是auto,或是没有指定,或者是position为absolute时,高度设置为100%,这样高度仍然是0。此时,top 的 50%,仍然是0,就不起作用。
2、父元素除了 position 为 relative 外,无需其它修饰。
例如:不要加:text-align: center; 之类的修饰。
垂直居中
.center-y { position: relative; top: 50%; transform: translateY(-50%); }
水平居中
.center-x { position: relative; left: 50%; transform: translateX(-50%); }
水平且垂直居中
.center{ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); }
解释:
top:50%,当position设置为 relative 或 absolute 时,指元素的顶部到父元素的顶部的距离是父元素高度的一半。(所以父元素的高度不能为0,或可能引起父元素高度为0的任何CSS属性)此时并未垂直居中,因为元素本身也是有高度的。
transform: translateY(-50%),是指在垂直方向,向上移动元素自身高度的一半。
这两个属性结合使用,就可以达到使元素在父元素中垂直居中。
方法三:通过 display:flex 实现CSS垂直居中
随着越来越多浏览器兼容CSS中的flexbox特性,所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的,只是在flex-direction上有所差别,一个是row(默认值),另外一个是column。
.parent { display:flex; } .child { align-self: center; }
引用请注明,
原文出处:https://www.iteye.com/blog/lixh1986-2513366
ref:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
https://blog.csdn.net/qq_33769914/article/details/97786549
https://www.cnblogs.com/clj2017/p/9293363.html
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 306flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 670效果预览: - https://www.runoob.com ... -
Sass之&引用父选择器
2018-08-08 11:29 8243Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1437效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2299在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1283HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1934效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1201Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2124CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 521@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 624Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 857A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 652导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1038效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2870效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16719- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 946在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2176原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4535效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3692如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
DIV+CSS 图片垂直居中效果
css图片垂直居中方法
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
CSS实现完美垂直居中 - 蓝色理想
NULL 博文链接:https://gucaihe.iteye.com/blog/1465144
CSS实现垂直居中的5种方法
css不定宽高让盒子里的内容垂直水平居中.里面步骤都有,
css 多行文本垂直居中显示,兼容各大浏览器!
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
css实现垂直居中的5种方法,慢慢总结的哦
div框水平垂直居中跟内容垂直居中
css图片垂直居中代码,超级简单,css只有二行,其中css最核心的地方用到 position,transform,解决以往代码多,或用table来居中的麻烦。
图片 CSS垂直居中图片 CSS垂直居中
css图片垂直居中,分IE,与非IE进行,很详细的
NULL 博文链接:https://zhouyao.iteye.com/blog/417432
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的...
NULL 博文链接:https://ice-cream.iteye.com/blog/293997
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
NULL 博文链接:https://highfly-s.iteye.com/blog/1878910