CSS 垂直居中方法汇总

直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。如下代码：

<div class="container">
hi,imooc!
</div>

css代码：

<style>
    .container{
    height:100px;
    line-height:100px; /* 仅能用于单行文本 */
    background:#999;
}
</style>

垂直居中-图片以及行内块元素

<div class="container">
<img src="imgegs/icon.png" />
</div>

css代码：

<style>
.container{
    height:100px;
    background:#999;
}
.container img{
    vertical-align:middle;
}
</style>

垂直居中-父元素高度确定的多行文本(方法一)

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

方法一：使用插入table(包括tbody、tr、td)标签, 同时设置vertical-align：middle。

说到竖直居中,css中有一个用于竖直居中的属性vertical-align,但这个样式只有在父元素为td 或th时,才会生效。所以又要插入table标签了。

下面看一下例子：

html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代码：

table td{height:500px;background:#ccc}

因为td标签默认情况下就默认设置了vertical-align为middle, 所以我们不需要显式地设置了。

垂直居中-父元素高度确定的多行文本(方法二)

在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell, 激活vertical-align属性, 但注意IE6、7并不支持这个样式。

html代码：

<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>

css代码：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

垂直居中--方法三

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 300px;
    background-color: orange;
}
/*
* 思路一：left:50%;top:50%;margin-left: -200px;margin-top: -150px;
* 思路二：left:0;top:0;right:0;bottom:0;margin:auto;
* */

div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); /* 平移 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>

实例1:将内层div的文本垂直居中

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代码任务区-->
</body>
</html>

实例2：将内层垂直居中、外层水平居中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#content{
    width:300px;
    height:300px;
    border:#000 solid 1px;
    margin:auto;
    display:table;
}
#wenzi{
    border:#F00 solid 1px;
    text-align:center;
    display:table-cell;
    vertical-align: middle;
}
</style>
</head>
<body>
<div id="content">
<div id="wenzi">
锄禾日当午，<br>
汗滴禾下土。<br>
谁知盘中餐，<br>
粒粒皆辛苦。<br>
</div>
</div>
</body>
</html>

实例3: 使用绝对定位垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 220px;
    height: 280px;
    background: url("img/王思聪.jpg");
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -140px;
}
</style>
</head>
<body>
<!--
行内元素(文本)->水平垂直居中
text-align: center;
line-height: height;
-->
<!--
块元素->水平垂直居中
margin: 0 auto;
-->
<div></div>
</body>
</html>

实例4: 使用绝对定位垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 600px;
    height: 200px;
    padding: 10px 20px;
    border: 1px solid #000;
    border-radius: 5px;
    /* 下面这种写法也可以让一个盒子居中 */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
</style>
</head>
<body>
<div>您确定删除：重庆万州公交坠江事件结果公布后，司乘纠纷和公交驾驶安全问题成为人们热议的焦点，如何预防和避免恶性结果的发生，才是问题的关键。“鼓励市民举报，并对勇于制止干扰公交车正常行驶违法行为的公民予以奖励。”昨日下午，西安市公安局公共交通分局召开媒体通气会，通报西安相关安全举措。这条消息吗</div>
</body>
</html>

绝对定位(固定定位)之后, 所有标准流的规则, 都不适用了。所以margin:0 auto; 失效。

解决办法：left:50%; margin-left:负的宽度的一半。（三句话）

div{
width: 600px;
height: 60px;
position: absolute;  /* → 第一句  */
left: 50%;   //   /*  → 第二句   */ 
top: 0;
margin-left: -300px;    /*→ 第三句。宽度的一半*/
}

实例4：使用绝对定位和margin:auto垂直居中

<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>

过以下CSS样式代码实现水平方向居中布局效果

.parent{position:relative;}
.child{position:absolute;left:50%;transform: translateX(-50%)}

优点:

父级元素是否脱离文档流, 不影响子集元素水平居中效果

缺点:transform属性是CSS3中新增属性, 浏览器支持情况不好

able + margin 实现水平方向居中, table-cell + vertical-algin 实现垂直居中

在线咨询

上一篇：SublimeText(代码编辑器)(文本编辑器for Mac/Windows中文版)
下一篇：CSS超炫加载动画设计、实现与实例讲解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 垂直居中方法汇总

您的项目需求