①水平垂直居中②轻提示

目录

一：文字水平垂直居中

二：css块级元素相对于父级（或者整体页面）水平垂直居中5种方法

方法1：flex水平垂直居中，父级添加display:flex

方法2：flex水平垂直居中，父级display:flex，子级margin:auto

方法3：position水平垂直居中，父级相对定位position:relative,子元素margin-top,margin-left 移动本身大小的一半

方法4：运用css3中transform 移动元素水平垂直居中 （第三种的升级）

方法5：top,left,bottom,right=0;margin:auto

方法6：table水平垂直居中

三：div相对于浏览器可视范围内水平垂直居中（轻提示）

---

一：文字水平垂直居中

            text-align: center;

            line-height: 100px;

二：css块级元素相对于父级（或者整体页面）水平垂直居中5种方法

总结css块级元素水平和垂直都居中比较常用的几种方法

方法1：flex水平垂直居中，父级添加display:flex

    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

方法2：flex水平垂直居中，父级display:flex，子级margin:auto

    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: aqua;
            display: flex;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: auto;
        }
    </style>

方法3：position水平垂直居中，父级相对定位position:relative,子元素margin-top,margin-left 移动本身大小的一半

    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>

方法4：运用css3中transform 移动元素水平垂直居中 （第三种的升级）

    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

方法5：top,left,bottom,right=0;margin:auto

    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>

方法6：table水平垂直居中

三：div相对于浏览器可视范围内水平垂直居中（轻提示）

<div class="share-toast"></div>
.share-toast{
    position: fixed;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    background-color: black;
    opacity: 0.5;
    width: 180px;
    height: 100px;
    border-radius: 10px;
}