水平垂直居中 | 前端技术知识

居中(水平居中)

内联元素水平居中（父元素上加，父元素必须块元素或行内块状元素）

html

<!DOCTYPE html>
<html>
<head>
    <style>
        #f{
            border:1px solid green;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="f">
        abc<div style="display:inline-block;">123</div>
        <div style="border:1px solid blue;width:100px;height:100px;">1</div>
    </div>
</body>

</html>

块级元素水平居中（子元素上加）

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f{
            border:1px solid green;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="f">
       
        <div style="border:1px solid blue;width:100px;height:100px;margin:0 auto;">1</div>
    </div>
</body>

</html>

使用弹性盒子。

它可以对inline、inline-bock、block都生效，用了就是block。

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            border: 1px solid green;
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div id="f">
        <span>123</span><br />
        <div style="border:1px solid red;width:100px;height:100px;display:inline-block">123</div>
        <div style="border:1px solid blue;width:100px;height:100px;">1</div>
    </div>
</body>

</html>

使用定位（已知子元素的宽度的情况下）

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            border: 1px solid green;
            position: relative;
        }

        #z {
            position: absolute;
            left: 50%;
            margin-left: -51px;
            width: 100px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <div id="f">
        <span id="z">123</span>
    </div>
</body>

</html>

使用transform（不知道子元素的宽度）

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            border: 1px solid green;
            position: relative;
        }

        #z {
            position: absolute;
            left: 50%;
            transform:translateX(-50%);
            width: 50%;
            height: 100px;
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <div id="f">
        <span id="z">123</span>
    </div>
</body>

</html>

居中(垂直居中)

单行元素垂直居中（行高等于高度）

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f{
            width:500px;
            height:500px;
            border:1px solid green;

            line-height: 500px;
        }
    </style>
</head>

<body>
    <div id="f">
        123
    </div>
</body>

</html>

多行文本垂直居中

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f{
            width:500px;
            height:500px;
            border:1px solid green;

            line-height: 500px;
            font-size:0;
        }
        #f span{
            display:inline-block;
            vertical-align: middle;
            line-height: normal;
            font-size:16px;
        }
    </style>
</head>

<body>
    <div id="f">
        <span>中扥中扥抓森中扥中扥撒洞抓飞洒扥飞洒扥撒扥撒扥中扥东风撒扥中扥撒扥飞洒扥浮动房东真三大发撒扥撒扥撒扥房东真抓森抓森撒扥撒扥房东真撒扥房东真</span>
    </div>
</body>

</html>

步骤：

父元素设置行高和高度相等。
父元素设置字体大小为0。
子元素用其他元素包起来然后display:inline-block。并且设置vertical-align:middle。
子元素去掉继承下来的行高。line-height:normal。
设置子元素本身的字体大小。

多行内联、内联块状元素垂直居中

table-cell，将元素定义为表格中的一个单元格。对应的HTML元素th、td。

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            width: 500px;
            height: 500px;
            border: 1px solid green;
            
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="f">
        <span>中扥中扥抓森中扥中扥撒洞抓飞洒扥飞洒扥撒扥撒扥中扥东风撒扥中扥撒扥飞洒扥浮动房东真三大发撒扥撒扥撒扥房东真抓森抓森撒扥撒扥房东真撒扥房东真</span>
    </div>
</body>

</html>

定位

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            width: 500px;
            height: 500px;
            border: 1px solid green;
            
            position:relative;
        }
        #f > div{
            position:absolute;
            top:50%;
            margin-top:-51px;
        }
    </style>
</head>

<body>
    <div id="f">
        <!-- <span>中扥中扥抓森中扥中扥撒洞抓飞洒扥飞洒扥撒扥撒扥中扥东风撒扥中扥撒扥飞洒扥浮动房东真三大发撒扥撒扥撒扥房东真抓森抓森撒扥撒扥房东真撒扥房东真</span> -->
        <!-- <img src="./2021-04-17_103425.png" /> -->
        <div style="border:1px solid green;width:100px;height:100px;"></div>
    </div>
</body>

</html>

transform

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            width: 500px;
            height: 500px;
            border: 1px solid green;
            
            position:relative;
        }
        #f > div{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
        }
    </style>
</head>

<body>
    <div id="f">
        <!-- <span>中扥中扥抓森中扥中扥撒洞抓飞洒扥飞洒扥撒扥撒扥中扥东风撒扥中扥撒扥飞洒扥浮动房东真三大发撒扥撒扥撒扥房东真抓森抓森撒扥撒扥房东真撒扥房东真</span> -->
        <!-- <img src="./2021-04-17_103425.png" /> -->
        <div style="border:1px solid green;width:100px;height:50%;"></div>
    </div>
</body>

</html>

flex

html

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            width: 500px;
            height: 500px;
            border: 1px solid green;
            
            display:flex;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="f">
        <!-- <span>中扥中扥抓森中扥中扥撒洞抓飞洒扥飞洒扥撒扥撒扥中扥东风撒扥中扥撒扥飞洒扥浮动房东真三大发撒扥撒扥撒扥房东真抓森抓森撒扥撒扥房东真撒扥房东真</span> -->
        <!-- <img src="./2021-04-17_103425.png" /> -->
        <div style="border:1px solid green;width:100px;height:100px;"></div>
    </div>
</body>

</html>

居中(水平居中) ​

居中(垂直居中) ​

居中(水平居中)

居中(垂直居中)