您的位置：首页 > Web前端 > CSS

css中各种居中的奇技淫巧总结

2016-03-28 17:51 696 查看

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;
}

html

<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

css

.center{
position:fixed;
top:50%;
left:50%;
background:#000;
width:50%;
height:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
}

附带兼容性写法：

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

html

<body>
<div class="center"></div>
</body>

第六种：flex布局

body{
display:flex;/*flex布局方式*/
display:-webkit-flex;
align-items:center; /*水平方向上*/
justify-content:center;/*垂直方向上的*/

}
.info{
height:200px;
width:200px;
background:gray;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航