盒子垂直居中方式

最新推荐文章于 2025-05-27 20:30:18 发布

weixin_30379531

最新推荐文章于 2025-05-27 20:30:18 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/king-ying/p/6484841.html

最通用的盒子垂直居中方式

1. absolute + translate

html :

<div class="wrap">
    <main>
        <blockquote> “n the event of a large-scale natural...
            <footer>— <cite> Oscar Wilde, The Picture of Dorian Gray </cite></footer>
        </blockquote>
    </main>
</div>

css ：

.wrap{
        width:100%;
        height: 100%;
        position: relative;
        /*overflow: hidden;*/
        background: url("../images/tiger.jpg") 0 / cover fixed;
    }
    main {
        width: 600px;
        height: 240px;
        border-radius: 8px;
        padding: 20px 10px;
        text-align: justify;
        position:absolute;
        left:50%;
        top:50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background: hsla(0, 0%, 100%, .3);
    }

2.absolute +margin

.wrap{
        width:100%;
        height: 100%;
        position: relative;
        background: url("../images/tiger.jpg") 0 / cover fixed;
    }
    main {
        width: 600px;
        height: 240px;
        border-radius: 8px;
        padding: 20px 10px;
        text-align: justify;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

转载于:https://www.cnblogs.com/king-ying/p/6484841.html