Css 让整个Div水平垂直居中

原创 陈宝佳  2018-07-26 11:27  阅读 176 次 评论 0 条
行云管家,新手有礼

问题:我想让整个Div水平垂直居中

.summary .content-size{
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
}

样式如下图所示

解决: -webkit-transform: translate(-50%,-50%);

.summary .content-size{
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    -webkit-transform: translate(-50%,-50%);   # 关键
}

样式的结果如下图所示

transform:translate()

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素

移动translate

移动translate我们分为三种情况:

translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);

translateX(x)仅水平方向移动(X轴移动);

translateY(Y)仅垂直方向移动(Y轴移动)。

更多用法请自行Google。

(完)

本文地址:https://www.cloudbility.com/club/7777.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:cloudbility
版权声明:本文为原创文章,版权归 陈宝佳 所有,欢迎分享本文,转载请保留出处!

发表评论


表情