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设备不支持，高度必须声明。

1. position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。

2. 为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器

3. 由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。

代码如下

1. div {

2. margin: auto;

3. position: absolute;

4. top: 0; left: 0; bottom: 0; right: 0;

5. }

当然可以通过设置top auto; left:10px;等来实现左侧居中或者右侧居中。

（3）其他的居中方式如单元格居中，

1. .cell {

2. display: table-cell;

3. vertical-align: middle;

4. }

5. .block {

6. width: 50%;

7. margin: 0 auto;

8. }

行内块元素等，支持IE7。

在已知道宽度高度的情况下负外边距方法也能很好的实现居于容器内。