当前位置： 移动技术网 > IT编程>网页制作>CSS > 移动端常见问题（水平居中和垂直居中）

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

2020年03月17日  | 移动技术网IT编程  | 我要评论

先准备个测试模板

<!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;

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网