您的位置：首页 > 其它

网页布局水平垂直技术

2016-03-08 18:07 316 查看

对于水平垂直居中的总结：

实现提供如下布局代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<style>
*{
margin:0;
padding:0;
}
.parBar{
position:relative;
width:32em;
height:32em;
margin:4em auto;
border:1px solid red;
}
.parBar .subBar{
width:13em;
height:13em;
border:1px solid black;
}

</style>
</head>
<body>
<div class="parBar">
<div class="subBar"></div>
</div>
</body>
</html>

第一种居中方式：

CSS绝对定位，对子元素增加如下代码：

.align-center{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}

第二种居中方式：

依旧是CSS绝对定位，代码如下：

<span style="font-family:Courier New;">.align-center{
position:absolute;
top:50%;
left:50%;
margin-top:-6.5em;
margin-left:-6.5em;
}</span>

第三种居中方式：

利用JQ或者JS代码，在将子元素对于这个父类元素的高宽进行居中设置，这是非常简单的数学计算，本处就不再过多提及。

第四种居中方式：

CSS绝对定位和相对位移，其中用到translate属性，如果大家做过3D效果的网页的话，这个东西便是再熟悉不过了。(不需要固定高度)

代码如下：

<span style="font-family:Courier New;">.align-center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
/*横坐标,纵坐标*/
}</span>

到此，大家可能就注意到了，这几个都包含一个元素设定那就是position:absolute/fixed,问题来了，如果没有这个属性怎么办呢？

第一种方式运用display:table-cell;

网页代码再次进行修改如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<style>
*{
margin:0;
padding:0;
}
.parBar{
position:relative;
width:32em;
height:32em;
margin:4em auto;
border:1px solid red;
}
.parBar .subBar{
width:13em;
height:13em;
border:1px solid black;
}

.parBar .sub2Bar{
width:6em;
height:6em;
border:1px solid black;
margin:auto;
}

</style>
</head>
<body>
<div class="parBar ">
<div class="subBar">
<div class="sub2Bar"></div>
</div>
</div>
</body>
</html>

垂直居中必须注意如下几条：

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

如上align-center样式必须加在父类上，同时他们的子元素想要水平居中的话比如使用margin:auto;属性。

效果如下：

第二种方法：

运用display:-webkit-box

代码如下：

.align-center{
display: -webkit-box;
-webkit-pox-pack:center;
-webkit-box-align:center;
}

此样式的使用和上面那种样式是一样的。

第三种方法：

:after,:before的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<style>
*{
margin:0;
padding:0;
}
.parBar{
position:relative;
width:32em;
height:32em;
margin:4em auto;
border:1px solid red;
}
.parBar .subBar{
width:13em;
height:13em;
border:1px solid black;
text-align:center;
}

.parBar .sub2Bar{
width:6em;
height:6em;
border:1px solid black;
display: inline-block;
vertical-align: middle;
}
.align-center:before{
height:100%;
content:'';
display: inline-block;
vertical-align: middle;
}
.align-center:after{
height:100%;
content:'';
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parBar">
<div class="subBar align-center">
<div class="sub2Bar "></div>
</div>
</div>
</body>
</html>

其中.align-center也是针对于父类而言的同时父类必须同时设定:after和:before否则子类元素只是竖直方向居中水平方向是没有居中的，子类元素要居中必须是行内元素display:inline-block;否则子类元素是无法居中的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航