web前端居中对齐方式怎么改（前端如何保证垂直）

在网页制作的过程中，会遇到垂直居中水平剧中的问题，水平剧中比较方便，但是垂直剧中却没那么方便，下面我们就来说一说关于web前端居中对齐方式怎么改?我们一起去了解并探讨一下这个问题吧!

web前端居中对齐方式怎么改

在网页制作的过程中，会遇到垂直居中水平剧中的问题，水平剧中比较方便，但是垂直剧中却没那么方便。

（1）在这里我主要用到方式是flex与box结合的方式，这种方式是css3新增属性，不只是用于垂直剧中，更是可以替代float属性的布局，可用于分栏等等。IE89不支持就要用到box属性。也建议大家多用这种技术。阮一峰写的介绍比较好，推荐大家阅读，http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 。

.div{

display: box; /* OLD - Android 4.4- */

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */

display: -ms-flexbox; /* TWEENER - IE 10 */

display: -webkit-flex; /* NEW - Chrome */

display: flex; /* NEW, Spec - Opera 12.1, Firefox 20 */

/* 09版 */

-webkit-box-orient: vertical;

/* 12版 */

-webkit-flex-direction:column;

-moz-flex-direction: column;

-ms-flex-direction: column;

-o-flex-direction: column;

flex-direction: column;

/* 09版 */

-webkit-box-align: center;

/* 12版 */

-webkit-align-items: center;

-moz-align-items: center;

-ms-align-items: center;

-o-align-items: center;

justify-content:center;

align-items: center;

}

（2）还会用到的居中方式，如div 绝对position 居中方式，这种方式用到 margin:auto 属性，或许你会觉得margin 只能左右居中，其实不然。这种方式优点比较多，如兼容性比较好，支持IE8.9.10,支持图片居中等等，缺点就是Windows Phone设备不支持，高度必须声明。

position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。
为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器
由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。

代码如下