|
用CSS实现元素的水平居中，比较简单，能够设置text-align center，或设置 margin-left:auto; margin-right:auto 之类的就可。
重点麻烦的地区还是在垂直居中的处理上，因此接下来重点思虑垂直方向上的居中实现。
水平垂直居中重点包含三类：基本文本类，图像类，其他元素类
但，亦是由于有些办法能够实现的，下面就来谈谈认识到的10中办法。
办法1、运用 line-height
这种方式更加多地用在 单行文字的状况,其中运用overflow:hidden的设置是为了防止内容超出容器或产生自动换行，这般就达不到垂直居中效果了
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
margin: 20px auto;
width: 200px;
height: 200px;
bac公斤round: #ddf;
}
.content {
line-height: 200px;
text-align: center;
overflow: hidden;
}
</style>
<div class="box">
<div class="content">
This is text
</div>
</div>
单行文字的状况各浏览器都能兼容，多行文字就必须思虑其他办法了。
但倘若是照片，IE6以上能够正常居中，以下（包含IE6）则不兼容。
（倘若想经过行高让照片在块元素内垂直居中，ie6没效果，由于ie6中含有替换元素的行高会失效。）
2、运用 vertical-align
加上这个属性，不外line-height亦不可丢
倘若不加上那个line-height的属性的话，div会认为你vertical-align的是默认高度，而不是自定义设置的高度。
.box {
margin: 20px auto;
width: 200px;
height: 200px;
bac公斤round: #ddf;
}
.content {
line-height: 200px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
跟以上同样，IE6的照片还是有问题
3、把容器当作表格单元
table能够设置vertical-align，自然能实现居中，因此咱们能够模拟出一个table
运用display:table和display:table-cell的办法，前者必要设置在父元素上，后者必要设置在子元素上，因此呢咱们要为必须定位的文本再增多一个<div>元素：
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
margin: 20px auto;
display: table;
width: 200px;
height: 200px;
bac公斤round: #ddf;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div cla
| 
发表于 2024-6-30 05:32:00
