HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
2017-08-11 18:25
716 查看
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
水平居中直接加上
下面说两种在屏幕正中(水平居中+垂直居中)的方法
放上示范的html代码:
方法一:
div使用绝对布局,设置
效果如图:
方法二:
仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
有不懂的地方欢迎加我QQ,点这里加好友 一起讨论——YinyouPoet
水平居中直接加上
<center>标签即可,或者设置
margin:auto;当然也可以用下面的方法
下面说两种在屏幕正中(水平居中+垂直居中)的方法
放上示范的html代码:
<body> <div class="main"> <h1>MAIN</h1> </div> </body>
方法一:
div使用绝对布局,设置
margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。
.main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
效果如图:
方法二:
仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
.main{ text-align: center; background-color: #fff; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
有不懂的地方欢迎加我QQ,点这里加好友 一起讨论——YinyouPoet
相关文章推荐
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- html中div如何水平和垂直居中的几种css方法代码
- CSS在页面布局中实现div垂直居中的方法总结
- CSS文本和div垂直居中方法总结
- div垂直居中的方法(css的),百分比div垂直居中,html5
- CSS、JS 使DIV水平 和 垂直居中的各种方法
- css 实现元素水平垂直居中总结5中方法
- CSS+div页面水平居中的布局方法总结
- CSS内联元素、块级元素的水平居中和垂直居中方法总结
- html中div使用CSS实现水平/垂直居中的多种方式
- CSS在页面布局中实现div垂直居中的方法总结(转)
- CSS在页面布局中实现div水平居中的方法总结(转)
- HTML/CSS控制div垂直&&水平居中屏幕
- CSS文本和div垂直居中方法总结
- CSS-垂直|水平居中问题的解决方法总结
- 【Web前端】CSS水平居中和垂直居中的方法总结
- CSS实现水平垂直居中方法总结
- css让一个div水平垂直居中方法大全
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)