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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1赞 92
  • CSS水平垂直居中总结
    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中： 让有宽度的div水平居中：...
    evelynlab阅读 568评论 0赞 3
  • H5移动端知识点总结
    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,282评论 0赞 26
  • H5移动端知识点总结
    移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,377评论 0赞 6
  • 盘点８种css实现垂直水平居中
    1.绝对定位居中技术 我们一直用margin:auto实现水平居中，而一直认为margin:auto不能实现垂直居...
    DecadeHeart阅读 1,582评论 0赞 3