CSS水平垂直居中总结

哎,最近项目又遇到水平垂直居中的需求,不做一下总结,总觉得没有level up!

前端知识体系

水平居中

行内元素

父元素块级元素:父元素text-align: center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中:父块级</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="father">
        <span id="son">我想牵着你的手,从心动到古稀!---酒馆</span>
    </div>
</body>
</html>

效果如下:

水平居中:父块级

父元素不是块级元素:父元素先设置为块级元素,在设置text-align: center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中:父非块级</title>
    <style>
        #father {
            width: 666px;
            height: 333px;
            background-color: seagreen;
            text-align: center;
            display: block;
        }
    </style>
</head>
<body>
<span id="father">
    <span id="son">我想牵着你的手,从心动到古稀!---酒馆</span>
</span>
</body>
</html>

效果如下:

水平居中:父非块级

块级元素

方案一

定宽度:谁居中,谁设置margin:0 auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中:块级元素-定宽</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;
        }
        #son{
            width: 200px;
            height: 111px;
            background-color: skyblue;
            margin: 0 auto;
        }
    </style>
</head>

<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!---酒馆</div>
</div>
</body>
</html>

效果如下:

水平居中:块级元素-定宽

不定宽度:子元素设为行内或行内块元素display:inline/inline-block,父元素设置text-align:center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中:块级元素-不定宽</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;
            text-align: center;
        }
        #son{
            background-color: skyblue;
            display: inline;
        }
    </style>
</head>

<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!---酒馆</div>
</div>
</body>
</html>

效果如下:

水平居中:块级元素-不定宽

方案二:使用定位属性

首先设置:

父元素:相对定位 `position:relative`
子元素:绝对定位`position:absolute` + `left:50%`

其次定宽的话:

子元素:
  margin-left:设置位元素宽度的负一半
  或者:
  transform: translateX(-50%)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中:定位属性-定宽</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;

            position: relative;
        }
        #son{
            width: 200px;
            height: 111px;
            background-color: skyblue;
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);

            /*margin-left: -100px;*/
        }
    </style>
</head>

<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!---酒馆</div>
</div>
</body>
</html>

效果如下:

水平居中:定位属性-定宽

那么不定宽的话:只能用transform: translateX(-50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中:定位属性-不定宽</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;

            position: relative;
        }
        #son{
            height: 111px;
            background-color: skyblue;
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);

            /*此处就不适用了*/
            /*margin-left: -100px;*/
        }
    </style>
</head>

<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!---酒馆</div>
</div>
</body>
</html>

效果如下:

水平居中:定位属性-不定宽

方案三:使用flexbox布局实现(宽度定不定都可以)

使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中:flexbox布局(宽度不论)</title>
    <style>
        #father {
            width: 666px;
            height: 333px;
            background-color: seagreen;
            /*水平居中flexbox */
            display: flex;
            justify-content: center;
        }

        #son {
            height: 111px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!---酒馆</div>
</div>
</body>
</html>

效果如下:

水平居中:flexbox布局(宽度不论)

垂直居中

单行的行内元素

只需设置单行的行内元素的:行高(line-height)=盒子高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中:单行的行内元素</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;
        }
        #son{
            height: 111px;
            line-height: 333px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
<div id="father">
    <span id="son">我想牵着你的手,从心动到古稀!---酒馆</span>
</div>
</body>
</html>

效果如下:

垂直居中:单行的行内元素

多行的行内元素

父元素:display:table-cell;vertical-align:center即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中:多行的行内元素</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;

            display: table-cell;
            vertical-align: middle;
        }
        #son{
            background-color: skyblue;
        }
    </style>
</head>

<body>
<div id="father">
    <span id="son">我想牵着你的手,从心动到古稀!我想牵着你的手,从心动到古稀!我想牵着你的手,从心动到古稀!我想牵着你的手,从心动到古稀!---酒馆</span>
</div>
</body>
</html>

效果如下:

垂直居中:多行的行内元素

块级元素

方案一:使用定位

首先设置:

父元素:相对定位 `position:relative`
子元素:绝对定位`position:absolute` + `top:50%`

其次定高的话:

子元素:
  margin-top:设置位元素宽度的负一半
  或者:
  transform: translateY(-50%)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中:定位属性-定高</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;
            position: relative;
        }
        #son{
            height: 120px;
            background-color: skyblue;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);

            /*margin-top: -60px;*/
        }
    </style>
</head>

<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!---酒馆</div>
</div>
</body>
</html>

效果如下:

垂直居中:定位属性-定高

那么不定高的话:只能用transform: translateY(-50%);

子元素:
  margin-top:设置位元素宽度的负一半
  或者:
  transform: translateY(-50%)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中:定位属性-不定高</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;
            position: relative;
        }
        #son{
            background-color: skyblue;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!---酒馆</div>
</div>
</body>
</html>

效果如下:

垂直居中:定位属性-定高

方案二:flexbox布局实现(不论高度)

只需给块状元素的父元素设置display: flex; align-items: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中:flebox布局-不论高度</title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;

            display: flex;
            align-items: center;
        }
        #son{
            background-color: skyblue;
        }
    </style>
</head>

<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!---酒馆</div>
</div>
</body>
</html>

效果如下:

垂直居中:flebox布局-不论高度

水平垂直居中

已知高度和宽度的元素

方案一:position+top/right/bottom/left

  父元素:相对定位
  子元素:绝对定位 + top: 0; right: 0; bottom: 0; left: 0; margin: auto;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中:宽高定<1></title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;
            
            position: relative;
        }
        #son{
            width: 200px;
            height: 111px;
            background-color: skyblue;
            
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!--酒馆</div>
</div>
</body>
</html>

效果如下:

水平垂直居中:宽高定<1>

方案二:position+margin

  父元素:相对定位
  子元素:绝对定位 + left: 50%; top: 50%; margin-left: 元素宽度的负一半; margin-top: 元素高度的负一半;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中:宽高定<2></title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;

            position: relative;
        }
        #son{
            width: 200px;
            height: 120px;
            background-color: skyblue;

            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -60px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!--酒馆</div>
</div>
</body>
</html>

效果如下:

水平垂直居中:宽高定<2>

未知高度和宽度的元素

方案一:使用定位属性

  父元素:相对定位
  子元素:绝对定位 + left: 50%; top: 50%; + transform: translateX(-50%) translateY(-50%);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中:宽高未知<1></title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;

            position: relative;
        }
        #son{
            background-color: skyblue;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%)
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!</div>
</div>
</body>
</html>

效果如下:

水平垂直居中:宽高未知<1>

方案二:使用flex布局实现

  父元素:
    display:flex;
    justify-content: center; 
    align-items: center;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中:宽高未知<2></title>
    <style>
        #father{
            width: 666px;
            height: 333px;
            background-color: seagreen;

            display:flex;
            justify-content: center;
            align-items: center;
        }
        #son{
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son">我想牵着你的手,从心动到古稀!---酒馆</div>
</div>
</body>
</html>

效果如下:

水平垂直居中:宽高未知<1>

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,778评论 1 88
  • CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...
    evelynlab阅读 213评论 0 3
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,103评论 0 24
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 1,821评论 0 5
  • 1.绝对定位居中技术 我们一直用margin:auto实现水平居中,而一直认为margin:auto不能实现垂直居...
    Decade_xun阅读 941评论 0 3