一、水平居中
0、inline-block元素
以下方法均适用于inline-block。
因为inline-block兼容了inline,block的优点。
1、常规流中inline元素
如果需要居中的元素为常规流中inline元素,为父元素设置text-align: center;即可实现(eg:文本居中)
<style>
body {background: #DDD;
text-align: center;
}
span {background: red;
display: inline-block; /*或display: inline;*/
}
</style>
<body>
<span>aaaaaa aaaaa</span>
</body>
效果图:
2、常规流中block元素(不适用于inline-block)
如果需要居中的元素为常规流中block元素,
1)为元素设置宽度,
2)设置左右margin为auto。
3)IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值
<body>
<div class="content">
aaaaaa aaaaa
</div>
</body>
<style>
body {
background: #DDD;
}
.content {
width: 500px; /* 1 */
text-align: left; /* 3 */
margin: 0 auto; /* 2 */
/* 加上 display: inline-block; 也行*/
background: purple;
}
</style>
效果图:
3、浮动元素(负外边距居中)
如果需要居中的元素为浮动元素,用负外边距居中法
1)为元素设置宽度,
2)position: relative;(或absolute)
3)浮动方向偏移量(left或者right)设置为50%,
4)浮动方向上的margin设置为元素宽度一半乘以-1
注:left: 0; right:0; top: 0; bottom: 0; 方法无效
<!--********** 左浮动居中 **********-->
<body>
<div class="content">
aaaaaa aaaaa
</div>
</body>
<style>
body {
background: #DDD;
}
.content {
width: 500px; /* 1 */
float: left;
padding:20px;
position: relative; /* 2 */
left: 50%; /* 3 */
/* 因为有padding,
若为标准盒模型:则变为(width + padding*2)/2
若为IE盒模型:则变为width/2,
这里是标准盒模型。
*/
/* 加上 display: inline-block; 也行*/
margin-left: -270px; /* 4 */
background-color: red;
}
</style>
效果图:
<!--********** 右浮动居中 **********-->
<body>
<div class="content">
aaaaaa aaaaa
</div>
</body>
<style>
body {
background: #DDD;
}
.content {
width: 500px; /* 1 */
float: right;
padding:20px;
position: relative; /* 2 */
right: 50%; /* 3 */
margin-right: -250px; /* 4 */
/* 加上 display: inline-block; 也行*/
background-color: red;
}
</style>
4、绝对/相对 定位元素
如果需要居中的元素为绝对(或相对)定位元素,
方法一:负外边距
1)为元素设置宽度,
2)偏移量设置为50%,
3)偏移方向外边距设置为元素宽度一半乘以-1
<body>
<div class="content">
aaaaaa aaaaa
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px; /* 1 */
position: absolute;
left: 50%; /* 2 */
margin-left: -400px; /* 3 */
/* 加上 display: inline-block; 也行*/
background-color: red;
}
</style>
方法二: left: 0; right:0; top: 0; bottom: 0;
1)为元素设置宽度,(该元素可以为inline或inline-block或block)
2)设置左右偏移量都为0,
3)设置左右外边距都为auto
如果你好奇为什么position:absolute和margin:auto连用会居中?
那么请点击这里
同理: top: 0; bottom: 0; 也可以实现上下居中
<body>
<div class="content">
aaaaaa aaaaa
</div>
</body>
<style>
body {background: #DDD;}
.content {
width: 800px; /* 1 */
/* 加上 display: inline-block或inline; 也行*/
/*inline可以是因为用了绝对定位被自动转化为inline-block*/
position: absolute;
left: 0; /* 2 */
right: 0; /* 2 */
margin: 0 auto; /* 3 */
background-color: red;
}
</style>
若上面代码,div没有设置宽度,则left:0;right:0;后,该div宽度会延展为父元素宽度(这里是全屏宽度)。
同理若div没有设置高度,则top:0;bottom:0;后,该div高度会延展为父元素高度(这里是全屏高度)。
二、垂直居中
1、inline元素
其父元素height与line-height大小一致即可。
<style>
body{background: #ccc;}
#one{
width: 100px;
height: 100px;
background: red;
line-height: 100px;
position: absolute;
left: 50%;
}
#one span{ /* 不能为display: inline-block;*/
height:30px;
background: yellow;
}
</style>
<div id="one">
<span>dsd</span>
</div>
效果:span元素实现了垂直居中
2、inline-block元素
- 父元素的height与line-height值相同
- vertical-align:middle;
<style>
body{background: #ccc;}
.center{
width: 500px;
height:300px;
line-height: 300px;
background: red;
}
.inner{
background: blue;
width: 300px;
height: 100px;
/*不能display: block; 可以display: inline;*/
display: inline-block;
vertical-align: middle;
}
</style>
<div class="center">
<div class="inner"></div>
</div>
执行结果:
3、block 元素
将 block 转换为inline 或 inline-block ,再重复上面方法。
4、脱离了普通文档流
1) 父元素position: relative/absolute
2) 居中元素position: absolute;
3) 居中元素top:0;bottom:0;
4) 居中元素margin:auto 0;
<style>
body{background: #ccc;}
.center{
width: 500px;
height:300px;
position: relative; /*1*/ /*或position: absolute;*/
background: red;
}
.inner{
background: blue;
width: 300px;
height: 100px;
display: inline; /*inline-block 或 block都可以*/
position: absolute; /*2*/ /*relative不行*/
top:0; /*3*/
bottom:0; /*3*/
margin:auto 0; /*4*/
}
</style>
<div class="center">
<div class="inner"></div>
</div>
执行结果:
面试可能会问:父元素高度宽度都不确定,怎么实现垂直水平居中?
方法一:left/top + transform
<style type="text/css">
body{background: yellow;}
.modal {
width: 200px;
height: 200px;
background: #000;
/**主要代码*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="modal"></div>