CSS垂直居中

一、单行文本垂直居中：

设置其文本的行高line-height与其父容器高度相等即可。如

<style>
    .test{
            background-color: grey;
            line-height:90px;
        }
</style>
<body>
    <div class="test">文本垂直居中</div>
</body>

效果图如下

二、已定位的盒子实现垂直居中

法一：子盒子绝对定位后设置其高度，margin:auto,且top、right、left、bottom均为0.

<style>
        .container{
            width: 500px;
            height: 500px;
            position: relative;
            background-color: red;
        }
        .absolute-center{
            width: 50%;
            height: 50%;
            overflow: auto;
            margin:auto;
            position: absolute;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background-color: green;
        }
    </style>

<body>
<div class="container">
    <div class="absolute-center">垂直居中</div>
</div>
</body>

效果图如下：

法二：让其子盒子绝对定位后的top:50%,margin-top:-自身高度的一半px;水平居然则设其left与margin-left

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width: 500px;
            height: 500px;
            position: relative;
            background-color: red;
        }
        .absolute-center{
            width:100px;
            height: 100px;
            position: absolute;
            top:50%;
            margin-top:-50px;
            left:50%;
            margin-left:-50px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="absolute-center">垂直居中</div>
</div>
</body>
</html>

效果图如下：

如果想让其在可视区内永远居中，则需要设置其定位为position:fixed;z-index:999;

法三：当元素的高度不确定时，可配合translate来实现，不过IE9不支持，代码如下：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{
            position: relative;
            height: 300px;
            background-color: grey;
        }
        .child{
            position: absolute;
            top:50%;
            transform:translateY(-50%);
            background-color: green;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">adfadf</div>
</div>
</body>
</html>

 三、未定位、未浮动的盒子实现垂直居中

法一：设置其父元素为table-cell布局，配合vertical-align: middle;来实现，如下代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{
            display: table-cell;
            vertical-align: middle;
            background-color: grey;
            height: 100px;

        }
        .child{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">table-cell实现的居中</div>
</div>
</body>
</html>

如果已经定位或浮动的元素仍然想用此方法来实现垂直居中，需要在其外面再加一个父盒子包起来便可实现。若要IE7支持，则需要改为<table>表格布局。

法二：若子元素是图片，通过设置父元素的行高来代替高度，且设置父元素的font-size为0

vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显。当font-size为0时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中。如下代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{
            line-height: 500px;
            fon-size:0;
            background-color: grey;
            width: 500px;

        }
        .child{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="parent">
    <img src="img/shop.png" alt="" class="child"/>
</div>
</body>
</html>

效果图如下：

法三：通过新增元素来实现垂直居中的效果

新增元素设置高度为父级高度，宽度为0，且同样设置垂直居中vertical-align:middle的inline-block元素。由于两个元素之间空白被解析，所以需要在父级设置font-size:0，在子级再将font-size设置为所需值；若结构要求不严格，则可以将两个元素一行显示，则不需要设置font-size:0。代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{
            height: 100px;
            font-size:0;
            background-color: grey;
            width: 200px;
        }
        .child{
            display: inline-block;
            font-size:20px;
            vertical-align: middle;
            background-color: blue;
        }
        .childSbling{
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">adfadf</div>
    <i class="childSbling"></i>
</div>
</body>
</html>

效果图如下：

法四：利用VW单位。VW是与视口宽度相关的，1VW表示视口宽度的1%

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .main {
            width: 18em;
            padding: 1em 1.5em;
            margin: 50vh auto 0;
            transform: translateY(-50%);
            box-sizing: border-box;
            background: #655;
            color: white;
            text-align: center;
        }
        h1 {
            margin: 0 0 .2em;
            font-size: 150%;
        }
        p {
            margin: 0;
        }
        body {
            background: #fb3;
            font: 100%/1.5 sans-serif;
        }
    </style>
</head>

<body>
    <div class="main">
        <h1>I am a title</h1>
        <p>asdfasdfasdf</p>
    </div>
</body>

</html>

效果如下：

 

四、使用弹性盒子来实现垂直居中，不过IE9以下不支持。

法一：在父盒子上加display:flex;align-items: center;如下代码：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{
            display: flex;
            align-items: center;
            background-color: grey;
            height: 200px;
        }

    </style>
</head>
<body>
<div class="parent">
    <div class="child">adfadf</div>
</div>
</body>
</html>

 

效果如下：

法二：在子盒子上加margin:auto 0;代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{
            display: flex;
            background-color: grey;
            height: 200px;
        }
        .child{
            margin:auto 0;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">子</div>
</div>
</body>
</html>

效果如下：

posted @ 2016-05-02 21:05  haoxl  阅读(398)  评论(0)  编辑  收藏  举报
转载请注明出处，否则追究法律责任