垂直/水平居中
程序员文章站
2023-12-28 23:03:40
...
垂直/水平居中的几种方法:
1.[原理] 设定宽度和高度,父节点为 position:relative; CSS是这样写的:
1.[原理] 设定宽度和高度,父节点为 position:relative; CSS是这样写的:
position:absolute;left:50%;top:50%;
margin-left:-元素自身宽度的一半;
margin-top:-元素自身高度的一半;
2.[原理] table, 用起来就更简单了, 只要添加:text-algin:center;
vertical-align:middle;
[方法] 提供模板化的CSS class方法, 规则如下:
样式:.sl-hvalign{
display:table;
overflow:hidden;
margin:0 auto;
height: 100%;
*position:relative;
}
.sl-hvalign-cnt{
display:table-cell;
vertical-align: middle;
*position:absolute;
top:50%;
}
.sl-hvalign-cnt-inner{
*position:relative;
*top:-50%;
}
AD:真正免费,域名+虚机+企业邮箱=0元
推荐阅读
-
垂直/水平居中
-
如何做好一个垂直搜索引擎
-
css中position:fixed实现div居中_html/css_WEB-ITnose
-
div居中问题_html/css_WEB-ITnose
-
新浪总编离职、搜狐财经势微 面对万千诱惑财经垂直站点该取哪瓢
-
js获取input长度并根据页面宽度设置其大小及居中对齐_javascript技巧
-
Mysql集群添加节点水平扩展
-
Latex 流程介绍,含中文和矩阵公式段落整体居中内部左对齐,aligned嵌套
-
css图片响应式+垂直水平居中2_html/css_WEB-ITnose
-
网页图片垂直剧中 等比例缩放 黑白显示_html/css_WEB-ITnose