代码改变世界

一些垂直居中方法

2016-04-26 14:19  孤独大兔子  阅读(204)  评论(0)  编辑  收藏  举报

1、利用伪类实现垂直居中(居中元素大小可未知)

<style>
    .main{width:300px;height:300px;border:1px solid;}
    .center{width:100px;height:100px;border: 1px solid;display: inline-block;vertical-align: middle;}
    .main:after{display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}
</style>
</head>
<body>
    <div class="main">
        <div class="center"></div>
    </div>
</body>

要点：居中元素需要是 display:inline-block;属性的元素。

2、利用transform:translate()，实现垂直居中(居中元素大小可未知)

<style>
    .main{width:300px;height:300px;border:1px solid;}
    .center{width:100px;height:100px;border: 1px solid;}
    .center{position:relative;transform: translateY(-50%);top:50%;}
</style>
</head>
<body>
    <div class="main">
        <div class="center"></div>
    </div>
</body>

原理：居中元素需要是定位，通过负自身的50%来实现居中。

3、利用flex实现垂直居中(居中元素大小可未知)

<style>
    .main{width:300px;height:300px;border:1px solid;}
    .center{width:100px;height:100px;border: 1px solid;}
    .main{display: -webkit-box;display: -ms-flexbox;-webkit-display:flex;display: flex;align-items: center;-webkit-align-items:center;}
</style>
</head>
<body>
    <div class="main">
        <div class="center"></div>
    </div>
</body>

要点：align-items:center; (适用于父盒子上，用于设置垂直对齐方式)

4、position方法实现居中(居中元素大小可未知)

<style>
    .main{width:300px;height:300px;border:1px solid;position:relative;}
    .center{width:100px;height:100px;border: 1px solid;}
    .center{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style>
</head>
<body>
    <div class="main">
        <div class="center"></div>
    </div>
</body>

要点：top和bottom都要设为0；

5、常用方法position（居中元素大小需已知）

<style>
    .main{width:300px;height:300px;border:1px solid;}
    .center{width:100px;height:100px;border: 1px solid;}
    .center{position:relative;top:50%;margin-top:-50px;}
</style>
</head>
<body>
    <div class="main">
        <div class="center"></div>
    </div>
</body>

要点：position以后，margin-top负50%盒子都高度；

6、table-cell

<style>
    .main{width:300px;height:300px;border:1px solid;}
    .center{width:100px;height:100px;border: 1px solid;display: table;}
    .main{display: table-cell;vertical-align: middle;}
</style>
</head>
<body>
    <div class="main">
        <div class="center"></div>
    </div>
</body>