垂直和水平居中方法小结
水平居中
行内元素
text-align:center;
块元素
1.定宽块元素水平居中
margin:0 auto;
2.不定宽块元素水平居中
方法一:利用浮动的包裹性和百分比相对定位
<div class='outer'>
<div class='inner'></div>
</div>
我们想要使inner(不定宽)水平居中于outer,能够这么做:
先在inner外面再加一层div:
<div class='outer'>
<div class='wrap'>
<div class='inner'></div>
</div>
</div>
起初盒子是这种:
CSS这么写:
.wrap{
float:left;
position:absolute;
left:50%;
}
.inner{
position:relative; //为啥用absolute没用啊
left:-50%;
}
wrap设置为float的原因是形成包裹。把inner包裹住。此时浮动元素wrap的宽和高都是有内部元素inner撑开的。不再是占满整行。
也就是说wrap的宽和inner的宽相等。
position:relative设置百分比意思是相对于父元素宽度的百分之几。此时,wrap的左边缘距离outer的左边缘是outer.width的一半,也就是说wrap的左边缘在outer的中线上。
可是我们想要inner的中线和outer的中线重叠,那么就须要inner再往左移动它自身宽度的一半,可是它自身的宽度不知道啊,这就是为什么须要再加一层wrap且wrap要浮动(包裹)的原因。可依据“relative设置百分比意思是相对于父元素宽度的百分之几”这个规则。
因为wrap的宽度和inner的相等,50%就是inner的宽度的50%。
这种方法也有缺点。因为wrap浮动了。应该清除浮动。
方法二:将要居中的元素放到table的一个td标签中
原因是table不是块元素。它不会占满整行,其宽度是由内容来撑开的。此时能够设置table的
margin:0 auto;`
就可以。
缺点是添加了无语义标签。
方法三 改变块元素属性为inline或者inline-block
这样其父元素就能够使用text-align:center居中内部元素
垂直居中
单行文本
设置父元素的height和line-height相等。
父元素高度确定的多行文本、图片、块元素
方法一:
将要垂直居中的元素放到table的td中,然后对td设置:
verticle-align:middle;
事实上默认就是这样。verticle-align仅仅适用于 inline level, inline-block level 及 table-cells 元素上。
方法二:
在chrome、firefox 及 IE8 以上的浏览器下能够设置块级元素的 display 为 table-cell,激活 vertical-align 属性。但注意 IE6、7 并不支持这个样式。能够不用table-row这一层,直接外层table。内层table-cell就能实现内层元素中的内容垂直居中。比如以下的toCenter想要在box中垂直居中。须要设置box为table-cell。这样就能够激活其vertical-align:
<div class="box">
<div class="toCenter">
我想要在父元素中垂直居中显示
</div>
</div>
.box{display: table-cell;width:200px;height:200px;background: pink;vertical-align: middle;}
.toCenter{width:100px;height:100px;background: purple;}
缺点:ie6和ie7并不支持display:table-cell。
方法三:要居中的元素高度确定
1.利用定位
<div class="outer">
<div class="inner"></div>
</div>
CSS代码为:
.outer{
background:#FFCCCC;
border:1px solid #000;
position:relative;
}
.inner{
width:100px;
height:100px;
background:#CCFF66;
position:absolute;
top:50%; //父元素高度的一半
margin-top:-50px; //上移自身高度的一半
}
为啥垂直居中不能够像水平居中方法一一样啊?
.inner{
position:relative;
top:-50%;
}
没实用?
??
2.在要居中元素之前加入一个浮动块,再设置该块的margin-bottom
<div class="box">
<div class="floater"></div>
<div class="toCenter">
我想要在父元素中垂直居中显示
</div>
</div>
.box{width:500px;height:500px;}
.toCenter{width:100px;height:100px;position: relative;clear: both} //清除浮动
.floater{height: 50%;float:left;margin-bottom: -50px}//下边距为 -要居中元素高度的一半
方法四 父元素的上下padding值设为一样
当父元素的高度未设置时,将父元素的上下padding值设置为一样就能够让其内部的块元素垂直方向上看上去居中了。
方法五
.box{position:relative;}
.toCenter{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
}
方法六 使用box属性
父元素设置:
display:box;
box-align:center; //将剩余空间均分到子元素上下两側
參考资料:
未知宽度水平居中的几种方法
CSS实现垂直居中的5种方法
待看资料: CSS 元素垂直居中的 6种方法