码迷,mamicode.com
首页 > Web开发 > 详细

css垂直居中

时间:2018-02-21 23:35:25      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:div   垂直   http   nsf   relative   idt   enter   定位   理论   

css水平居中很容易实现,如果是行内元素,直接使用text-align:center,如果是块元素,则可以marin-left:auto;margin-right:auto;来实现。

垂直居中是前端开发中极其常见的需求,理论上很简单,实践起来却有难度。常用的有以下几种方法:

html格式:

 

<div class="out-box">
        <div class="inner-box">
            <p>inner text</p>
            <h5>inner title</h5>
        </div>
    </div>

 

 

 

1.基于绝对定位的方案

.out-box{
            width: 200px;
            height: 200px;
            background: yellow;
            margin: 50px auto;
            position: relative;
        }
        .inner-box{
            width: 80px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
       color:#fff;
       text-align:center;
}

效果如图:

技术分享图片

2.基于flexbox的解决方案

.out-box{
            width: 200px;
            height: 200px;
            background: yellow;
            margin: 50px auto;
            display: flex;
        }
        .inner-box{
            background: blue;
            margin: auto;
            color: #fff;
            text-align: center;
        }

效果如图所示:

技术分享图片

 

css垂直居中

标签:div   垂直   http   nsf   relative   idt   enter   定位   理论   

原文地址:https://www.cnblogs.com/cherryshuang/p/8457715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!