html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #parent{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        #childTwo{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="childTwo">box</div>
    </div>
</body>
</html>

实现效果

在这里插入图片描述

定位

一般需要两个条件

父元素的相对定位
子元素的绝对定位
然后利用margin和transform来进行微调

方法一:子元素百分比

#parent{
    width: 400px;
    height: 400px;
    position: relative;
    border: 1px solid black;
}
#childTwo{
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

方法二:父元素无定位，子元素相对定位

相对定位的值如果是百分比的话，那么他定位的参照元素是距离最近的父元素，父元素必须有宽高

#parent{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}
#childTwo{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

方法三:定位扯开元素

#parent{
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid black;
}
#childTwo{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: red;
}

Flex布局

方法一:flex

#parent{
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
#childTwo{
    width: 100px;
    height: 100px;
    background-color: red;
}

方法二:flex

#parent{
    position: relative;
    border: 1px solid black;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
}
#childTwo{
    width: 100px;
    height: 100px;
    background-color: red;
    align-self: center;
}

表格

#parent{
    height: 400px;
    width: 400px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}
#childTwo{
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: red;
}

外边距

当外边距使用百分比的时候，那么这个百分比参照的值是元素的父元素的高度，然后我们还需要微调元素的一般

#parent{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* 必须加上 */
    overflow: hidden;
}
#childTwo{
    width: 100px;
    height: 100px;
    margin: 50% auto;
    /* 微调 */
    transform: translateY(-50%);
    background-color: red;
}

行高

行高一般只适用于内联元素，所以垂直居中的时候，我们要把子元素变成内联元素,且子元素的高度，还要注意父元素的行高会被子元素继承下来，所以子元素必须重新写一下行高

#parent{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    text-align: center;
    /* 必须加上 */
    overflow: hidden;
    line-height: 400px;
}
#childTwo{
    background-color: red;
    width: 100px;
    height: 100px;
    line-height: 100px;
    display: inline-block;
}