CSS 居中对齐
代码中均省略了浏览器前缀
以下例子以我的个人的标准排序
当然也有更多的居中处理方法 但我觉得只有这 5 种方法是最完善的解决方案
flex 居中
优点:可对未知高度进行居中处理
<h2>这是第二层的内容 不会居中</h2>
<style>
.wrap{height: 100%;display: flex; justify-content: center; align-items: center;align-content:center;}
.other{background-color: #ccc; width: 400px;height: 400px;} /* 额外的样式 可去除 */
</style>
<div class="wrap">
<div class="other">
position + translate 居中
</div>
</div>
优点: 可对未知高度进行居中处理,嵌套层最少
<style>
/* position 可选 absolute|fixed*/
<h2>这一层的内容 不会居中</h2>
.center{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);}
.other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<div class="center other">
</div>
table-cell 居中
缺点:1. 居中层需要设置宽度 (.center). 2. 外层多嵌套一层 (.cell) 3. 居中层必须设置宽度 (允许 %)
这一层的内容 不会居中
<style>
.wrap{display: table;width: 100%;height: 100%;} .cell{display: table-cell;vertical-align:middle;}
.center{width: 400px;margin-left:auto;margin-right:auto;} .other{background-color:
#ccc; height: 400px;} /* 额外的样式 可去除 */
</style>
<div class="wrap">
<div class="cell">
<div class="center other">
<h2>
传统居中 (2 种)
</h2>
</div>
</div>
</div>
缺点:1. margin 值必须为 auto. 2. 居中层必须设置高宽 (允许 %) 3. 必须使用 position
<style>
/* 1. left,top,right,bottom 可以任意,但必须相等 2. position 可选 absolute|fixed */
可去除 */
.center{position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;margin:
auto;width: 400px;height: 400px;} .other{background-color: #ccc; } /* 额外的样式
这一层的内容 不会居中
</style>
<div class="center other">
<h2>
</h2>
</div>
缺点: 居中层必须设置固定高宽, 并且 magin 需要通过高宽计算得出.<h2>这一层的内容 不会居中</h2>
<style>
.wrap{position: relative;height: 100%;} .center{position: absolute;left:
50%;top: 50%; width: 400px;height: 300px; margin-left: -200px;margin-top:
-150px;} .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<div class="wrap">
<div class="center other">
我的前端
</div>
</div>
© 著作权归作者所有
举报文章
独自迈向前方
来源: http://www.jianshu.com/p/a2a5e1ba9cb2