元素垂直居中
2018-06-24 02:02:44来源:未知 阅读 ()
1、表格实现
父级{display:table;} 子级{display:table-cell;vertical-align:middle;}
2、inline-block设置垂直居中
<style>
html,body{height:100%;}
.wrapper{height:100%;}
/* 在content容器之前构造一个空内容的inline-block,让空内容行内上下对齐 */
.wrapper:before{content:"";display:inline-block;height:100%;vertical-align: middle;}
.content{width:98%;display:inline-block;vertical-align: middle;}
</style>
<div class="wrapper">
<div class="content">content</div>
</div>
3、flex布局实现居中
{ display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }
4、居中定位
.center { position: absolute; top: 50%; left: 50%; width:50%; height: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- 前端CSS五中元素定位类型 2020-06-01
- css设置overflow:hiden行内元素会发生偏移的现象 2020-05-09
- CSS的 行内元素 和 块类元素 2020-05-06
- 相邻元素margin的自动合并与float的坑 2020-04-30
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