主要内容
介绍CSS样式中水平居中垂直居中的一些常用方法和实践。本文是从网上集思广益总结出来的，在实践过程中尝试多几次必定能有所收获。如有不正确的地方请指出，本人不胜感激（本人刚入门菜鸟一个
）。
水平居中
（1）行内元素
在父级元素设置text-align:center
<head>
<meta charset="utf-8">
<title>水平居中-行内元素text-align:center</title>
<style>
body {
text-align: center;
}
.father {
width: 300px;
height: 300px;
background: orange;
text-align: center;
}
</style>
</head>
<body>
<span>行内元素水平居中</span>
<!-- text-align: center;对块级元素是没效果的 -->
<div class="father">
<span>行内元素水平居中</span>
</div>
</body>
（2）确定宽度块级元素
设置margin-left:auto 和 margin-right:auto<head>
<meta charset="utf-8">
<title>水平居中-确定宽度块级元素</title>
<style>
.father {
width: 300px;
height: 300px;
background: orange;
}
.son {
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: #F16464;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
son不设宽高不见了：
son单设高度：
（3）不确定宽度块级元素
a：使用table标签
table 不是块级元素，不设置宽度的情况下，由内部元素的宽度作支撑，所以仅设置margin-left:auto 和 margin-right:auto也可以实现居中。<head>
<meta charset="utf-8">
<title>水平居中-不确定宽度块级元素(1)使用table标签</title>
<style>
.father {
width: 300px;
height: 300px;
background: orange;
}
/*(3)不确定宽度块级元素水平居中，方式一：使用table
margin-left: auto;
margin-right: auto;
*/
table {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="father">
<table>
<tr>
<td>
<div class="t2"><span>不确定宽度1</span></div>
</td>
</tr>
</table>
</div>
</body>
</html>
<table>
<tr>
<td>
<div class="t2"><span>不确定宽度1</span></div>
</td>
</tr>
<tr>
<td>
<div style="width:30px;height:30px;background-color: #6060F1;"></div>
</td>
</tr>
</table>
b：改变块级元素的display属性为inline类型
然后父容器使用text-align:center,缺点是变成行内元素之后不能设置长宽值。
<head><meta charset="utf-8">
<title>水平居中-display: inline</title>
<style>
.father {
width: 300px;
height: 300px;
background: orange;
text-align: center;
}
.son {
width:150px; /*inline-block 可以设置宽度 有效*/
display: inline-block;
border:2px solid #FA5B5B;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<span>不确定宽度2</span>
</div>
</div>
</body>
</html>
c：给父元素设置float，position:relative和left:50%,子元素设置position:relative和left:-50%
缺点是position:relative带来的影响。
完整代码：<head>
<meta charset="utf-8">
<style>
.father{
position:relative;/* 注释掉这句看效果*/
left:50%;
float:left;
}
.son{
position:relative;
left:-50%;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<span>元素水平居中</span>
</div>
</div>
</body>
</html>
d:相对定位+偏移量
注意：子元素相对居中的父元素要设置position:relatival;<head>
<meta charset="utf-8">
<style>
.father{
width:500px;
height:500px;
position:relative;/* 注释掉这句看效果*/
background-color: #DA91EE
}
.son{
width:100px;
height:100px;
position:absolute;
left:50%;
margin-left:-50px;
background-color: #68FC54
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<span>行内元素水平居中</span>
</div>
</div>
</body>
</html>
垂直居中
（1）父元素高度不确定的块级元素居中
在父容器设置相同上下边距
<head><meta charset="utf-8">
<title>垂直居中-父元素高度不确定的块级元素居中</title>
<style>
.father {
/*width: 300px;
height: 300px;*/
background: orange;
margin-top: 50%;
margin-bottom: 50%;
}
.son {
width: 100px;
height: 100px;
background: #854CE9;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
（2）父元素高度确定的单行文本垂直居中
父元素设置line-height的值跟父元素高度相同
<html lang="en"><head>
<meta charset="utf-8">
<title>垂直居中-父元素高度确定的单行文本垂直居中</title>
<style>
.father{
width:500px;
height:500px;
background-color: #EBB2B2
}
.father span{
line-height: 500px;
}
</style>
</head>
<body>
<div class="father">
<span>垂直居中</span>
</div>
</body>
</html>
（3）父元素高度确定的多行文本、图片、块级元素的垂直居中
a：使用表格，vertical-align属性，vertical-align属性只对td和th生效
<head><meta charset="utf-8">
<title>垂直居中-父元素高度确定的多行文本、图片、块级元素的垂直居中 法一：table</title>
<style>
.father {
width: 300px;
height: 300px;
background: orange;
}
.son {
width: 100px;
height: 100px;
background: #854CE9;
}
.mytable{ /* 要设置表格高 不然没有居中效果 */
height:100%;
}
.mytable td{
vertical-align:middle;
}
</style>
</head>
<body>
<div class="father">
<table class="mytable">
<tr>
<td>
<div class="son">
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
b：对支持display:table-cell的IE8和firfox浏览器使用display:table-cell和vertical-align:middle属性
对不支持display:table-cell的IE6和IE7，加多一层.hack 层绝对定位 top:50%; 再让 .cnt 层相对自身向上提50%。
<head>
<meta charset="utf-8">
<title>垂直居中-父元素高度确定的多行文本、图片、块级元素的垂直居中 法二：display:table-cell</title>
<style>
.wrap {
width: 500px;
height: 500px;
border: 3px solid #ddd;
margin: 0 auto;
padding: 20px;
display: table;
*position: relative;/*兼容IE6和7*/
}
.hack {
border: 3px solid #433FF8;
display: table-cell;
vertical-align: middle;
/*兼容IE6和7*/
*position: absolute;
*top: 50%;
}
.cnt {
border: 3px solid #31F959;
/*兼容IE6和7*/
*position: relative;
*top: -50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="hack">
<div class="cnt">
content
</div>
</div>
</div>
</body>
</html>
c.绝对定位 和负边距
偏移可以使用margin-top: -本身高度一半px;或 transform: translateY(-50%);<head>
<meta charset="utf-8">
<title>垂直居中-父元素高度确定的多行文本、图片、块级元素的垂直居中 法三：绝对定位和负边距</title>
<style>
*{
margin:0 auto;
padding:0;
}
.father {
width: 300px;
height: 300px;
background: orange;
position: relative;
}
.son {
width:100px;
height:100px;
background-color: #70FEFF;
position: absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
d.绝对定位和0
注意;这里得确定内部元素的高度,不然默认填充父容器<head>
<meta charset="utf-8">
<title>居中-绝对定位和0</title>
<style>
.father {
width: 300px;
height: 300px;
background: orange;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.son {
width: 100px;
height: 100px;
background: #4CF848;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
e.Flex布局
<head><meta charset="utf-8">
<title>居中-最简单方式：Flex</title>
<style>
.father {
width: 300px;
height: 300px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
.son {
width: 100px;
height: 100px;
background: #4CF848;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
f.display:inline-block
通过:after来占位。<head>
<meta charset="utf-8">
<title>居中-display:inline-block</title>
<style>
.father {
width: 300px;
height: 300px;
background: orange;
}
.father :after {
content: '';
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
.son {
width: 100px;
height: 100px;
background: #4CF848;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
g.display:flex和margin:auto
<head><meta charset="utf-8">
<title>居中-display:flex和margin:auto</title>
<style>
.father {
width: 300px;
height: 300px;
background: orange;
display: flex;
}
.son {
width: 100px;
height: 100px;
background: #4CF848;
margin:auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
h.display:-webkit-box
<head><meta charset="utf-8">
<title>居中-display:-webkit-box</title>
<style>
.father {
width: 300px;
height: 300px;
background: orange;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-box-orient: vertical;
text-align: center;
}
.son {
width: 100px;
height: 100px;
background: #4CF848;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
I.空div浮动
在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。content 清除浮动，并显示在中间。
<head>
<meta charset="utf-8">
<title>居中-空div浮动</title>
<style>
.t1 {
width: 500px;
height: 500px;
background-color: #FB6E6E;
}
/*跟占位符那种方法差不多*/
.float_empty {
float: left;
height: 50%;
margin-bottom: -150px;
border: 5px solid #4352FA;
}
.t2 {
clear: both;
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="t1">
<div class="float_empty">
</div>
<div class="t2">
</div>
</div>
</body>
</html>
扫一扫
2064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
