不定宽元素居中以及元素垂直居中.md

不定宽元素居中以及元素垂直居中

平常大家对元素进行居中，一般是这个样子的：

	width: xx;
	margin: 0 auto;

设置一个宽度，并使用外边距进行居中。好不好用大家都知道，但宽度不定就不好弄了。

举个例子~

今天公司做活动，在首页轮播图上多加了几页，刷新一看，嗯？这底部按钮怎么不居中？，打开控制台一看，嚯

直接绝对定位加left做的，这，不好，所以，改。

改改改

直接上最后结果

.banner .num {
	zoom: 1;
	z-index: 30;
	display: table;
	position: relative;
	margin: 0 auto;
	margin-top: -20px;
}

最关键的就是使用display: table;这个属性的说法是什么什么什么。。。

此元素会作为块级表格来显示（类似

），表格前后带有换行符。

嘛，反正最后表现就是有了一个实际的宽度，再配合外边距居中，完美！

然后到360浏览器兼容模式一看，没有了。。。？

虽然知道display: table;不支持IE7一下，单360兼容模式不该是IE8么？我记错了？

我记错了~

坑爹啊！

没办法，HACK走一波！

.banner .num {
	zoom: 1;
	z-index: 30;
	display: table;
	position: relative;
	margin: 0 auto;
	margin-top: -20px;
	#position: absolute;
	#bottom: 10px;
	#left: 43%;
}

没有了！

对了，还有资料：

html 中 div不定宽度如何水平居中的解决方案  http://blog.csdn.net/phker/article/details/42425305

can i use http://caniuse.com/#search=display%3A%20table

聚奢网 http://www.jushewang.com/

这下真没有了！

2016年5月30补充

<meta http-equiv="x-ua-compatible" content="IE=edge" >

这行代码能使360兼容模式用最新的IE内核渲染~这样的话就少了很多烦恼了，像上面的和box-sizing~~~

2016年8月29日补充

垂直居中

    <main>
        <h1>h1h1h1h1h1</h1>
        <p>ppppppppppppppp</p>
    </main>

    main {
        transition: .5s;
        text-align: center;
        background-color: #333;
        color: #fff;
        width: 20em;
        height: 8em;
        box-sizing: border-box;
        padding: 1em 2em;
    }

绝对定位

        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -10em;
        margin-top: -4em;

绝对定位·改

        position: absolute;
        left: calc(50% - 10em);
        top: calc(50% - 2em);

绝对定位·改2

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

视口单位

        margin: 50vh auto 0;
        transform: translateY(-50%);

flex+align-self

    main {
        align-self: center;
    } 
    body {
        display: flex;
        min-height: 100vh;
        margin: 0;
    }

flex

    main {
        margin: auto;
    }
    
    body {
        display: flex;
        min-height: 100vh;
    }

内容居中

    <main>
        mmmmmmmmmmmmmmmmmmmm
    </main>
    main {
        display: flex;
        align-items: center;
        justify-content: center;

    }

2016年9月2日补充

writing-mode+margin

	body{
   		writing-mode: tb-rl;
    	-webkit-writing-mode: vertical-rl;      
        writing-mode: vertical-rl;
	}
	main{
      margin-top:auto;
      margin-bottom:auto;
	}

writing+text-align

	body{
   		writing-mode: tb-rl;
    	-webkit-writing-mode: vertical-rl;      
        writing-mode: vertical-rl;
      	text-align:center;
	}

2016年10月18日补充

display:table

demo

			.box {
				display: table;
				background-color: #000;
				height: 600px;
				width: 1000px;
			}		
			.small {
				background-color: #fff;
				display: table-cell;
				vertical-align: middle;
			}