css布局之块上下左右居中

以下方案的通用代码：

HTML code：

<div class="box">

    <div class="content">

        <!--content body-->

    </div>

</div>

CSS code：

.box{width:100%;height:500px;background-color: #00ff00;}

.content{width:300px;height:300px;background-color: #f0f000;}

1.position top:50%;left:50%+margin-top: -1/2height;margin-left: -1/2width;

CSS样式：

 .box{position: relative;}

 .content{position: absolute;top:50%;left:50%;margin-top: -150px;margin-left: -150px;}

原理：

内容块以盒子为参考做绝对定位，通过top:50%;left:50%;使内容块的左上角处于box的中心位置；

通过设置内容块的margin值margin-top: -150px;margin-left: -150px;,使其中心位置和box的中心位置重合，达到居中效果；

兼容：

兼容所有浏览器，包括IE6及以上；

2.position top:0;bottom:0;left:0;right:0;+margin: auto;

CSS样式：

.box{position: relative;}

.content{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}

原理：

内容块以盒子为参考做绝对定位，通过top:0;left:0;bottom:0;right:0;使内容块撑开为box大小；

设置宽高后，重新渲染内容块大小填充不了整个box，默认位于左上角，通过设置``margin:auto;`使内容块实现上下左右居中；

在文档流中，margin:auto;会被认为是margin-top:0;margin-bottom:0;而绝对定位使块脱离文档流，margin:auto;能让块在top:0;left:0;bottom:0;right:0;组成的边界中垂直居中；

margin:auto;在绝对定位中才能实现垂直居中；

兼容：

IE8以下不支持

3.display: table-cell;vertical-align:middle+margin：0 auto;

CSS样式：

.box{display: table-cell;vertical-align:middle;}

.content{margin:0 auto;}

原理：

table-cell可以将块设置成表格单元格形式，此时设置vertical-align:middle;将基线设置为单元格中间，故可实现垂直居中；

margin:0 auto;使内容块实现水平居中；

兼容：

IE6和7不兼容table-cell

4.inline-block+ vertical-align:middle;

CSS样式：

.box{text-align:center;}

.box:after{content:'';height:100%;display:inline-block;vertical-align:middle;}

.content{display:inline-block;vertical-align:middle;margin-left:-0.25em;}

原理：

vertical-align用于设置垂直对齐方式，定义行内元素的基线相对于元素所在行基线的垂直对其方式。假设有两个行内元素a和 b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置。

text-align使行内块居中显示，after伪类设置成行内块，并且设高度为100%，vertical-align:middle;以后将基线设置成box的中间线，相当于display:table-cell;

由于行内块默认有左右margin值，导致内容块与居中有偏差，故设一个左外边距为负值margin-left:-0.25em;

兼容：

IE6和7不支持inline-block

巴特西

css布局之块上下左右居中

1.position top:50%;left:50%+margin-top: -1/2height;margin-left: -1/2width;

原理：

兼容：

2.position top:0;bottom:0;left:0;right:0;+margin: auto;

原理：

兼容：

3.display: table-cell;vertical-align:middle+margin：0 auto;

原理：

兼容：

4.inline-block+ vertical-align:middle;

原理：

兼容：

最新文章

热门文章