网上科普有关“css怎么让一个form标签水平垂直居中显示”话题很是火热，小编也是针对css怎么让一个form标签水平垂直居中显示寻找了一些与之相关的一些信息进行分析 ，如果能碰巧解决你现在面临的问题 ，希望能够帮助到您。
需要准备的材料分别有：电脑、浏览器 、html编辑器 。
1 、首先，打开html编辑器 ，新建html文件 ，例如：index.html，输入问题基础代码 。
2、在index.html中的<style>标签中 ，输入css代码：body {text-align:center;} ，在<script>标签中输入js代码：
var a = ($(document).height() - $('form').height()) / 2;
$('form').css('margin-top', a + 'px');
3 、浏览器运行index.html页面，此时form标签成功在页面中水平垂直居中了。
1.兼容性不错的主流用法是：（但 ，这种方法有一个很明显的不足 ，就是需要提前知道元素的尺寸 。否则margin负值的调整无法精确 。此时，往往要借助JS获得。）
.conter{
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
2.CSS3的兴起 ，使得有了更好的解决方法 ，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，可以这样
.conter{
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
3.margin:auto实现绝对定位元素的居中(上下左右均0位置定位；margin: auto)
.conter{
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
4.使用css3盒模型:flex布局 。（不考虑低版本浏览器的情况下）
关于“css怎么让一个form标签水平垂直居中显示 ”这个话题的介绍，今天小编就给大家分享完了 ，如果对你有所帮助请保持对本站的关注！
本文来自作者[向南]投稿，不代表石号立场，如若转载，请注明出处：https://s0429.com/cshi/202512-2382.html
评论列表（4条）
我是石号的签约作者“向南”！
希望本篇文章《css怎么让一个form标签水平垂直居中显示_1》能对你有所帮助！
本站[石号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“css怎么让一个form标签水平垂直居中显示”话题很是火热，小编也是针对css怎么让一个form标签水平垂直居中显示寻找了一些与之相关的一些信息进行分析，如果能碰...