移动端常见问题（水平居中和垂直居中）

先准备个测试模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg{
            width:100%;
            height:100%;
            position: fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
            background-color: lightblue;
        }
        .text{
            background:#fff;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="bg">
        <span class="text">单行文字水平垂直居中</span>
    </div>
</body>
</html>

内联元素，没有设置宽高

1、自身水平垂直居中

设置padding （左右方向有效，上下方向无效）

2、在容器内水平垂直居中

方法一：

            position: absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);

方法二：flex布局（适合移动端）

            display: flex;
            justify-content: center;
            align-items: center;

内联块元素，没有设置宽高

1、自身水平垂直居中

设置padding

            display:inline-block;
            padding:30px 20px;

2、在容器内水平垂直居中

            position: absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);

块元素，没有设置宽高

1、自身水平垂直居中

            display:block;
            padding:20px 0;
            text-align: center;

2、在容器内水平垂直居中

            position: absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);

设置position为absolute，相当于把元素变为了inline-block，因此宽度没有占据整行

如果需要的话，可以手动添加width

            position: absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width:100%;

指定容器宽高，内联块

            display:inline-block;
            width:200px;
            height:100px;

1、自身水平垂直居中

单行文字可以使用line-height

            text-align:center;
            line-height:100px;

多行文字

            display: flex;
            justify-content: center;
            align-items: center;

这种是将多行文字看做一个整体水平垂直居中，因此不是每一行文字都是水平居中效果

2、在容器内水平垂直居中

            position: absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);

或者

            position: absolute;
            top:50%;
            left:50%;
            margin-left:-100px;
            margin-top:-50px;

指定容器宽高，块元素

1、自身水平垂直居中

单行文字

            display:block;
            width:200px;
            height:100px;

            text-align:center;
            line-height:100px;

多行文字

            display: flex;
            justify-content: center;
            align-items: center;

2、在容器内水平垂直居中

            position: absolute;
            top:50%;
            left:50%;
            margin-left:-100px;
            margin-top:-50px;

或者

            position: absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);

如果单纯水平居中，可以控制margin

            margin:0 auto;

来源：https://www.cnblogs.com/chenyingying0/p/12510562.html

标签

垂直居中

html居中

position