前言:水平居中,我们可以很容易想到使用text-align实现文字水平居中,使用margin:0px auto;可以实现元素水平居中;所以重点将是怎么实现文字和元素的垂直居中??
--- 本文将通过举栗子说明各种解决方式:
首先,单行文字、多行文字怎么水平垂直居中??
① 方案一:文本水平居中使用text-align:center即可,height设置和line-height一致可以实现单行文本垂直居中;如下
.class1 {
height:50px;
width:500px;
text-align: center;
background-color:lightblue;
line-height:50px;
overflow: hidden;
}
<div class="class1">测试单行文字水平垂直居中</div>
②方案二:具体到像素,单行或多行文字垂直居中还可以通过上下padding相等来实现,如下
.class2 {
font-size:20px;
color:red;
padding:20px 0px;
border:1px solid red;
text-align:center;
}
<p class="class2">这是段落内容,可以通过上下padding实现文字垂直居中</p>
③方案三:使用flex布局的justify-content: center;align-items: center;以及text-align:center;来单行或多行文字水平垂直居中实现,如下
.class3 {
height:90px;
color:blue;
border:1px solid red;
display:flex;
justify-content: center;
align-items: center;
text-align:center;
}
<p class="class3">这是段落内容,可以通过上下display:flex和text-align:center实现文字水平垂直居中,可以通过上下display:flex和text-align:center实现文字水平垂直居中,</p>
④方案四:display: table-cell;vertical-align: middle;实现单行或多行文字垂直居中,如下
.class4 {
height:90px;
width:500px;
text-align: center;
background-color:orange;
display: table-cell;
vertical-align: middle;
}
注意:vertical-align:center只对行内元素有效,加上display:table-cell可以实现垂直居中的效果;但是table布局不推荐使用,因为会影响网页性能;
元素水平垂直居中:
①方案一:已知子元素宽高,比如宽高都是200px; 使用absoluted定位和负margin值是宽高的一半来实现水平垂直居中,如下
.outBox {
position: relative;
width:600px;
height:300px;
border:1px solid purple;
}
.innerBox {
width:200px;
height:200px;
background-color:lightblue;
position: absolute;
top:50%;
left: 50%;
margin-top:-100px;
margin-left: -100px;
}
<div class="outBox">
<div class="innerBox">这是元素内容块,使用绝对定位结合负margin来实现垂直水平居中</div>
</div>
说明:项目中经常使用,兼容性较好
②方案二:已知元素宽高。在绝对定位下,top、right、bottom、left均为0的情况下会自动填充父元素的可用空间,再使用margin:auto会平均分配空间;如下
.outBox {
position: relative;
border:1px solid red;
height:250px;
width:650px;
}
.innerBox {
width:300px;
height:100px;
position: absolute;
top:0;bottom: 0;left:0;right:0;
background-color: lightblue;
margin:auto;
}
<div class="outBox">
<div class="innerBox">这是需要水平居中的元素,使用的是绝对定位top、bottom、left、right均为0</div>
</div>
③方案三:元素未知或已知宽高。利用css3的transform实现垂直水平居中
outBox {
position: relative;
border:1px solid red;
height:250px;
width:650px;
}
.innerBox {
border:1px solid blue;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
说明:此方法和flex布局只支持IE9+以上的浏览器。
④元素未知或已知宽高。利用flex弹性布局实现(flex布局后续会详解)
.outBox {
border:1px solid red;
height:250px;
width:650px;
display: flex;
justify-content: center;
align-items: center;
}
.innerBox {
border:1px solid blue;
}
其它常用的布局常遇到的问题demo
Demo1: 如何解决单行图片和文字水平居中排列的问题??
<div>
<img src="http://www.w3school.com.cn/i/eg_bookasp.gif" style="width:50px;height:50px;vertical-align: middle;">
测试用的文字
</div>
说明:只需要在img标签加上vertical-align:middle; 样式就可以实现单行图片文字垂直居中;
效果:
Demo2:为什么在使用dispaly:inline-block; 的元素上使用vertical-align:middle;无效??
<div style="border:1px solid red ;width:220px;height:50px;display: inline-block;vertical-align: middle;text-align: center;">
需要垂直居中显示的文字
</div>
<span>nihao</span>
说明:vertical-align:middle;只对行内元素有效。 使用了dispaly:inline-block;的元素可以理解为是可在一行内排列的块级元素,可以设置宽高;解决办法:使用display:cell-table;vertical-align:middle; 或使用line-height;或使用flex布局居中;
效果: