css 居中问题总结
2018-06-24 01:46:01来源:未知 阅读 ()
html代码:
<div class="box"> <div class="box-item"> 文字 </div> </div>
css样式:
一、水平居中
.box-item{ text-align:center; }
*一般用于文字以及inline-block/inline水平居中 ,设置该值表示box-item内文字居中对齐
.box-item{ margin:0 auto; }
*一般用于类似div的block水平居中,表示box-item整个div在box内水平居中对齐
二、垂直居中
- 高度等于行高,适合单行文字居中对齐
.box-item{ line-height:30px; height:30px }
- margin为高度一半
.box{ width:100%; height:100%; margin:0; padding:0 } .box-item{ width:100px; height:100px; border:1px solid #ccc; position:relative; top: 50%; margin: -150px auto 0 auto; }
- 前一种方式的改良版
.box{ width:100%; height:100%; margin:0; padding:0 } .box-item{ width:100px; height:100px; border:1px solid #ccc; position:relative; top: 50%; margin:0 auto; transform: translateY(-50%); }
- align-items存在兼容性问题
.box { display: flex; align-items: center; justify-content: center; } .box-item { width: 300px; height: 300px; border: 1px solid #ccc; }
- 兼容性较好的几种:
.box-item{ margin:auto; width:100px; height:100px; position:absolute; top:0; left:0; bottom:0; right:0; }
.box{ position: relative; height:100%; width:100%; } .box-item{ width: 100px; height: 100px; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.box{ text-align: center; overflow: auto; height:100%; } .box:after,.box-item{ display: inline-block; vertical-align: middle; } .box:after { content: ''; height: 100%; margin-left: -0.25em; } .box-item{ max-width: 99%; }
- 表格法
.box{ display:table; width:100%; height:100%; } .box-item { display: table-cell; vertical-align: middle; text-align: center; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:两天学会css基础(一)
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash