首页 / CSS / 总结css居中问题的解决办法
总结css居中问题的解决办法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了总结css居中问题的解决办法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2805字,纯文字阅读大概需要5分钟。
内容图文
![总结css居中问题的解决办法](/upload/InfoBanner/zyjiaocheng/415/2a2bf3032e594b40aedafba119030ceb.jpg)
CSS居中遇到的问题总结
水平居中
【行内元素】适用inline,inline-block,inline-table,inline-flex元素
.center { text-align: center; }
【块级元素】适用于block level元素
①一个块级元素
.center { margin: 0 auto; }
②多个块级元素
方法一:将块级元素变为行内块级元素 html部分: <main class="inline-block-center"> <p>1</p> <p>2</p> <p>3</p> </main> css部分: .inline-block-center { text-align: center; } .inline-block-center p { display: inline-block; text-align: left; } 方法二:flex布局 html部分: <main class="flex-center"> <p>1</p> <p>2</p> <p>3</p> </main> css部分: .flex-center{ display:flex; justify-content:center; }
垂直居中
【行内元素】
①单个行内元素:
情况一:当link或文本有包裹元素时,设置相等的上下padding
.link { padding-top: 30px; padding-bottom: 30px; }
情况二:当link或文本没有包裹时,设置行高和高度相等
.center-text-trick { height: 100px; line-height: 100px }
②多个行内元素:
方法一:将多个行内元素分别置于table-cell中 html部分: <table> <tr> <td> 1 </td> </tr> </table> css部分: table td { background: black; color: white; padding: 20px; border: 10px solid white; /* default is vertical-align: middle; */ } 方法二:将父元素设置为display:table,将自身设置为display:table-cell html部分: <p class="center-table"> <p>1</p> </p> css部分: .center-table { display: table; height: 250px; width: 240px; } .center-table p { display: table-cell; vertical-align: middle; } 方法三:使用felex html部分: <p class="flex-center"> <p>1</p> </p> css部分: .flex-center{ display: flex; justify-content: center; flex-direction: column; height: 400px;/*父容器必须有固定高度*/ } 方法四:当以上代码均不可用时,可尝试此奇淫巧技 html部分: <p class="ghost-center"> <p>1</p> </p> css部分: .ghost-center { position: relative; } .ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .ghost-center p { display: inline-block; vertical-align: middle; }
【块级元素】
①已知元素高度(绝对定位+负的margin)
.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* 为元素高度的一半,没有box-sizing时,为height+padding+border的一半*/ }
②不知元素高度(与上一方法,大同小异)
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
③flex布局
.parent { display: flex; flex-direction: column; justify-content: center; }
水平垂直均居中
①有固定宽高的元素
.parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px;/* 注意此处为height+padding+的一半*/ }
②没有固定宽高的元素(同之前没有固定宽高元素一样,用transform解决)
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
③使用flexbox布局
.parent { display: flex; justify-content: center; align-items: center; }
以上就是总结css居中问题的解决办法的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的总结css居中问题的解决办法全部内容,希望文章能够帮你解决总结css居中问题的解决办法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。