CSS垂直水平居中方式大全(二)----水平垂直居中-蒲公英云

CSS垂直水平居中方式大全(二)----水平垂直居中

1.利用绝对定位+transform(不固定宽高水平垂直居中)

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
            #box {
                position: relative;
                width: 500px;
                height: 400px;
                background: #faebcc;
            }
            #child {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%);
            }
        </style>
    </head>
    <body>
                <div id="box">
                    <div id="child">Hello world</div>
                </div>
    </body>
</html>

效果:

20171201145318463

2.利用绝对定位+margin(.child宽高固定)

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
            #box {
                position: relative;
                width: 500px;
                height: 400px;
                background: #faebcc;
            }
            #child {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100px;
                height: 80px;
                background: #999999;
                margin: -40px 0 0 -50px;/*负值取宽、高的一半*/
            }
        </style>
    </head>
    <body>
                <div id="box">
                    <div id="child">Hello world</div>
                </div>
    </body>
</html>

效果:

20171201145452103

3.利用定位与margin:auto

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
            #box {
                position: relative;
                width: 500px;
                height: 400px;
                background: #faebcc;
            }
            #child {
                position: absolute;    
                width: 100px;
                height: 80px;
                background: #DDDDDD;
                top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;
            }
        </style>
    </head>
    <body>
                <div id="box">
                    <div id="child">Hello world</div>
                </div>
    </body>
</html>

效果:

20171201145628414

4.利用display:table-cell

CSS中有一个用于竖直居中的属性vertical-align，但只有当父元素为td或者th时，这个vertical-align属性
才会生效，对于其他块级元素，例如 div、p等，默认情况下是不支持vertical-align属性的，设置块级元素的
display类型为table-cell，激活vertical-align属性，但display:table-cell存在兼容性问题，
所以这种方法没办法跨浏览器兼容。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
            #box {
                display: table-cell;
                vertical-align: middle;/*垂直*/
                text-align: center;/*水平*/
                width: 500px;
                height: 400px;
                background: #faebcc;
            }
            #child {
                display: inline-block;
                width: 100px;
                height: 80px;
                background: #f65f57;
            }
        </style>
    </head>
    <body>
                <div id="box">
                    <div id="child">Hello world</div>
                </div>
    </body>
</html>

效果:

20171201145848312

5.页面居中

方法一:

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
            #child {
                width:100px;
                height:100px;
                background:aqua;
                position:absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                margin:auto;
            }
        </style>
    </head>
    <body>
               <div id="child">Hello world</div>
    </body>
</html>

效果:

20171201161220507

方法二:

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
          #child {
                width:100px;
                height:100px;
                background:aqua;
                position:absolute;
                top:50%;
                left:50%;
                margin-left:-50px;
                margin-bottom:-50px;
          }
        </style>
    </head>
    <body>
    <div id="child">Hello world</div>
    </body>
</html>

效果:

20171201161350359

方法三:

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
          #child {
                background:aqua;
                position: absolute; 
                width: 6em; 
                height: 6em;
                top: calc(50% - 3em); 
                left: calc(50% - 3em); 
          }
        </style>
    </head>
    <body>
              <div id="child">Hello world</div>
    </body>
</html>

效果:

20171201161500494

方法四:

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style>
          #child {
            background: #999999;
                position: absolute; 
                top:50%;
                left:50%;
                transform:translate(-50% -50%);
          }
        </style>
    </head>
    <body>
        <div id="child">Hello world</div>
    </body>
</html>