未知元素宽高实现垂直水平居中的几种解决方案

最新推荐文章于 2024-02-26 08:00:00 发布

weixin_34143774

最新推荐文章于 2024-02-26 08:00:00 发布

阅读量125

点赞数

原文链接：http://www.cnblogs.com/lawliete/p/7997964.html

版权

1. 利用table cell的特性使用vertical:midlle 进行辅助

.wrap {
    width: 600px;
    height: 600px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: #92b922;
}
.inner {
    background: #de3168;
    display: inline-block;
    color: #fff;
    padding: 20px;
}
    </style>
</head>
<body>
<div class="wrap">
    <div class="inner">
        Hello I'm here    
    </div>
</div>

2.利用CSS transform 进行居中(其中百分比是指当前元素 content+ padding + border的大小)

    <style>
        .parent{
            position: relative;
            height:300px;
            width: 300px;
            background: #FD0C70;
        }
        .parent .child{
            position: absolute;
            top: 50%;
            left: 50%;
            color: #fff;
            transform: translate(-50%, -50%);
        }
    </style>
    <div class="parent">
        <div class="child">hello I'm here</div> 
    </div>

3. 利用flex 布局

    <style>
        .parent{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height:300px;
            background: #FD0C70;
        }
        .parent .child{
            color: #fff;
        }
    </style>
<div class="parent">
    <div class="child">hello I'm here</div>
</div>

转载于:https://www.cnblogs.com/lawliete/p/7997964.html

weixin_34143774

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
未知元素宽高实现垂直水平居中的几种解决方案

1. 利用table cell的特性使用vertical:midlle 进行辅助.wrap { width: 600px; height: 600px; display: table-cell; vertical-align: middle; text-align: center; background: #92b922;...
复制链接

扫一扫