凹槽水平、垂直分割线及垂直居中效果

效果地址： http://jmams.github.io/test/201410/separate.htm

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>凹槽分割线</title>
</head>
<style type="text/css" title="">
body {
background-color: rgb(247, 247, 247)
}
.sparate {
border: 1px solid #e2e2e2;
border- 1px 0;
border-bottom-color: #fff;
}
.v-center {
background-color:red;
600px;
margin: 0 auto;
height:30px;
text-align:center;
line-height:30px;
}
.lt {
height:100px;
600px;
border: 1px solid #ddd;
}
.lt-left {
float:left;
height:100%;
300px;
border-right: 1px solid #e2e2e2;
}

.lt-right {
float:left;
height:100%;
298px;
border-left: 1px solid #fff;
}

</style>

<body >

<h3>单行分割线：</h3>
<div class="sparate" ></div>

<h3>垂直分割线:</h3>
<div class="lt">
<div class="lt-left"><h4>内容一</h4></div>
<div class="lt-right"><h4>内容二</h4></div>
</div>

</html>

凹槽水平、垂直分割线 及垂直居中效果

凹槽水平、垂直分割线及垂直居中效果