web前端开发博客
专注web前端发展
2019年05月19日 作者: 国瑞个人博客 425次浏览
web前端开发中经常会遇到页面元素居中的问题，以后介绍比较零散，今天来详细介绍一下，页面居中主要会用到哪里呢，主要会用到登录框，页面弹框等处，真可谓用途广泛，下面就来给大家介绍介绍在web前端开发中比较常用的几种居中方式
1 2 3 4 5 6 7 8 9 | <style type="text/css"> div{<br /> width:300px;<br /> height:100px;<br /> text-align:center;<br /> line-height:100px;<br /> }<br /> </style> <div>文字居中</div> |
1 2 3 4 5 6 7 8 9 | <style type="text/css"> div{<br /> width:300px;<br /> height:100px;<br /> margin:0px auto;//上下边距为0，水平居中<br /> background:#ccc;<br /> }<br /> </style> <div>文字居中</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style type="text/css"> div{<br /> width:300px;<br /> height:100px;<br /> position:relative;<br /> }<br /> div p{<br /> width:100px;<br /> height:20px;<br /> position:absolute;<br /> margin:auto;<br /> top:0;<br /> bottom:0;<br /> left:0;<br /> right:0;<br /> }<br /> </style> <div> 文字居中 </div> |
4、元素绝对居中的另一种方法，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style type="text/css"> div{<br /> width:300px;<br /> height:100px;<br /> position:relative;<br /> background:#bbb;<br /> }<br /> div p{<br /> width:100px;<br /> height:20px;<br /> position:absolute;<br /> top:50%;<br /> margin-top:-10px;<br /> left:50%;<br /> margin-left:-50px;<br /> }<br /> </style> <div> 文字居中 </div> |
点击快速分享：
以上就是国瑞前端个人博客带来的是《web前端开发中常用的居中方法》，感谢您的观看！
如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/1720.html
「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
上一篇：前端开发利器_Mac电脑快捷键
相关文章：
国瑞个人博客：是啊，要是考得上的话
评：博主参加专升本去了
唯品秀博客：教书吗
评：博主参加专升本去了国瑞个人博客：虽说用vue也可以实现jQuery一样的效果，但是写起来太复杂，jQuery就很方便，所以为...
评：nuxt如何来引入jQuery库国瑞个人博客：这个时候，就需要使用到nuxt.js来将页面渲染出蜘蛛爬虫可抓取的页面
评：nuxt如何来引入jQuery库国瑞个人博客：vue.js因为使用的是html5的hash来实现页面的切换，所以蜘蛛爬虫是怕去不了的
评：nuxt如何来引入jQuery库国瑞个人博客：哈哈哈，欢迎来访，这文章是不是很给力！
评：如何自学前端页面编程_找到工作
共有 0 条评论