×
目录
[1]text-align [2]margin [3]absolute [4]flex
前面的话
水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路
思路一：在父元素中设置text-align:center实现行内元素水平居中
将子元素的display设置为inline-block，使子元素变成行内元素
[注意]若要兼容IE7-浏览器，可使用display:inline;zoom:1;来达到inline-block的效果
思路二：在本身元素设置margin: 0 auto实现块级元素水平居中
【1】将子元素的display为table，使子元素成为块级元素，同时table还具有包裹性，宽度由内容撑开
[注意]若要兼容IE7-浏览器，可把child的结构换成
【2】若子元素定宽，则可以使用绝对定位的盒模型属性，实现居中效果；若不设置宽度时，子元素被拉伸
思路三: 通过绝对定位的偏移属性实现水平居中
【1】配合translate()位移函数
translate函数的百分比是相对于自身宽度的，所以left:50%配合translateX(-50%)可实现居中效果
[注意]IE9-浏览器不支持
【2】配合relative
relative数值型的偏移属性是相对于自身的，但百分比却是相对于包含块的。因为子元素已经被设置为absolute，所以若使用relative，则需要增加一层结构，使其宽度与子元素宽度相同
[注意]该方法全兼容，但是增加了html结构
【3】配合负margin
margin的百分比是相对于包含块的，所以需要增加一层结构。由于宽度width的默认值是auto，当设置负margin时，width也会随着变大。所以此时需要定宽处理
[注意]虽然全兼容，但需要增加页面结构及定宽处理，所以限制了应用场景
思路四: 使用弹性盒模型flex实现水平居中
[注意]IE9-浏览器不支持
【1】在伸缩容器上设置主轴对齐方式justify-content:center
【2】在伸缩项目上设置margin: 0 auto
// 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
