css/css3实现未知宽高元素的垂直居中和水平居中

weixin_30635053

于 2018-06-03 01:02:00 发布

阅读量115

点赞数

原文链接：http://www.cnblogs.com/luckyXcc/p/9127704.html

版权

题目：
.a{
　　width: 200px;
　　height: 200px;
　　background-color: #ccc;
}

<body>　　
　　<div class="a">
　　　　<div class="b">1111</div>
　　</div>
</body>


1、第一种 css3的transform

　　.a{

　　　　position: relative;

　　}

　　.b{
　　　　position: absolute;
　　　　top: 50%;
　　　　left: 50%;
　　　　transform: translate(-50%, -50%);
　　}

2、第二种 display的table-cell

　　.a{

　　　　display: table;

　　}　　

　　.b{
　　　　display: table-cell;
　　　　text-align: center;
　　　　vertical-align: middle;

　　}

　3、第三种 flex盒子布局

　　.a{
　　　　display: flex;

　　　　justify-content: center;

　　　　align-items: center;

　　}

转载于:https://www.cnblogs.com/luckyXcc/p/9127704.html

关注

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。