关于垂直水平居中

1、如下面的代码，给父盒子设置display:flex;属性，然后给子盒子设置margin:auto;的属性，便可以让子盒子居中，这个是C3的高级属性

 

<style>

.box {

　　width: 600px;

　　height: 400px;

　　border: 1px solid #ccc;

　　display: flex;

}

.inner {

　　width: 200px;

　　height: 150px;

　　background: red;

　　margin: auto;

}

</style>

<body>

　　<div class="box">

　　　　<div class="inner"></div>

　　</div>

</body>

2、利用表格的特性，表格里内容会自动上下居中，然后给td设置text-align: center;属性

<style>
table {
　　width: 400px;
　　height: 200px;
　　border: 1px solid #ccc;
}
td {
　　border: 1px solid #ccc;
　　text-align: center;
}

</style>

<body>

　　

　　<table>
　　　　<tr>
　　　　　　<td>
　　　　　　　　居中显示
　　　　　　</td>
　　　　</tr>
　　</table>

</body>

3、

<style>
.box {
　　width: 400px;
　　height: 300px;
　　border: 1px solid #ccc;
　　display: table; /* 告诉浏览器渲染的时候按表格属性去渲染 */
　　text-align: center;
}
　　.inner {
　　display: table-cell;/*告诉浏览器当成表格的基本单位去渲染*/
　　vertical-align: middle;
}
</style>

<body>
　　<div class="box">
　　　　<div class="inner">居中显示</div>
　　</div>
</body>

posted @ 2016-10-08 18:57  furry`  阅读(126)  评论(0)    收藏  举报