实例
大家好：
以下是我对几种居中方式的理解与联系，如有错误望大家指出，谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.23作业</title>
<style type="text/css">
.box1 {
height: 300px;
width: 800px;
border:2px solid red;
background-image: url(images/bg/sky3-1.png);
background-repeat: no-repeat;
background-size: 100% 300px;
/*块元素在块元素中垂直居中*/
display: table-cell;
vertical-align: middle;
}
.box2 {
height: 200px;
width: 50%;
border:1px solid blue;
/*块元素在块元素中水平居中*/
margin: auto;
/*单行行内元素水平居中*/
text-align: center;
}
.box2 a{
/*单行行内元素垂直居中*/
line-height: 200px;
/*去掉下划线*/
text-decoration: none;
font-size: 30px;
}
.child {
width: 60px;
height: 110px;
background-color: lightblue;
/*多行行内元素水平居中*/
text-align: center;
/*多行行内元素垂直居中*/
display: table-cell;
vertical-align: middle;
}
.item{
width: 650px;
height: 180px;
background-color: lightgreen;
/*子元素是不定宽的块元素的水平居中*/
text-align: center;
/*子元素是不定宽的块元素的垂直居中*/
display: table-cell;
vertical-align: bottom;
}
.item li {
list-style: none;
/*块元素转换为行内元素*/
display: inline;
}
.item ul {
padding: 0;
margin:0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<a href="">好好学习 天天向上</a>
</div>
</div>
<hr>
<div class="child">
<a href="">新闻</a><br>
<a href="">社区</a><br>
<a href="">影音</a><br>
<a href="">购物</a>
</div>
<div class="item">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
以下是为了加深印象的手抄代码：
