三行css代码实现垂直居中_html/css_WEB-ITnose
程序员文章站
2024-01-14 14:07:58
...
html结构为:
css代码为:
#div2{ height:300px;width:300px; border:1px red solid; text-align:center; margin:auto;}#div1{ height:50px;width:50px; position: relative; top: 50%; transform: translateY(-50%); border:1px red solid; margin:auto;}
其中最核心的css是这三行
position: relative; top: 50%; transform: translateY(-50%);
为了浏览器兼容性,需要在transform属性前添加浏览器前缀
上一篇: Excel-漏斗图分析(差异分析)
推荐阅读
-
三行css代码实现垂直居中_html/css_WEB-ITnose
-
javascript实现网页定时跳转代码_html/css_WEB-ITnose
-
td内有图片和文字,如何都垂直居中?_html/css_WEB-ITnose
-
css3实现的圆角效果代码实例_html/css_WEB-ITnose
-
css实现的弹出窗口始终垂直水平居中效果_html/css_WEB-ITnose
-
css如何实现一个文字两种颜色代码实例_html/css_WEB-ITnose
-
优化Markdown样式及实现代码行号显示_html/css_WEB-ITnose
-
IE8 如何让无序列表中的文字与里面的div在垂直方向都居中_html/css_WEB-ITnose
-
CSS:水平居中与垂直居中_html/css_WEB-ITnose
-
css中字体垂直居中_html/css_WEB-ITnose