css中各种居中的奇技淫巧总结
Posted 咕咚
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css中各种居中的奇技淫巧总结相关的知识,希望对你有一定的参考价值。
css中各种居中的奇技淫巧总结
第一种,在固定布局中比较常用的技巧设置container的margin:0 auto;
第二种(从布局中入手)
css
.outer{ height:200px; width:200px; background:gray; position:relative; } .inner{ width:100px; height:100px; top:50%; left:50%; background:black; position:absolute; margin-left:-50px; margin-top:-50px; }
<div class="outer">
<div class="inner"></div>
</div>
效果
第三种;单行文字居中
.info{ /* 1.前提设置固定的高 2.只能有一段文字 */ height:100px; line-height:100px; border:1px solid blue; text-align:center; /*如要要垂直居中的话就加上它把*/ }
第四种
table布局
<table style="width: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
这个也是可以居中的滴呀
</td>
</tr>
</table>
也可以改成是我们的div
css:
.outer{ display:table; width:100%; } .inner{ display:table-cell; text-align:center; vertical-align:middle; /*而且: 水平和垂直方向都居中了滴呀 */ }
html
<div class="outer">
<div class="inner">居中</div>
</div>
第五种:translate
第六种:flex布局
以上是关于css中各种居中的奇技淫巧总结的主要内容,如果未能解决你的问题,请参考以下文章