1.水平垂直居中
(1).块级元素包含行列元素
<style>
.wp {
width: 500px;
height: 500px;
background-color: blue;
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wp">
<span>123123</div>
</div>
</body>
( 2)块级元素包含块级元素
.wp {
width: 500px;
height: 500px;
background-color: blue;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content{
width: 200px;
height: 200px;
background-color: rgb(196, 13, 89);
}
</style>
</head>
<body>
<div class="wp">
<div class="content">123123</div>
</div>
</body>
2.元素水平平均排列
1.虽然css3加入display:flex,但兼容性较差,所以在需要的情况下可以用table进行布局
(缺陷:无法换行)
<style>
<style>
.table {
width: 1000px;
display: table;
border-spacing: 30px 0;
}
.tableCell {
display: table-cell;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
background: #6ee0b6;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCell">
<span>1</span>
</div>
<div class="tableCell">
<span>2</span>
</div>
<div class="tableCell">
<span>3</span>
</div>
</div>
3.自动占满剩余空间
<style>
.table {
display: table;
}
.demo2 {
width: 400px;
height: 300px;
}
.demo2 div.table-header-group {
padding: 5px 20px;
background: #10CFBD;
}
.demo2 .main {
height: 100%;
background: #48B0F7;
}
.demo2 div.table-footer-group {
padding: 5px 20px;
background: #10CFBD;
}
.table-row {
display: table-row;
}
</style>
</head>
<body>
<h3>自动占满剩余空间</h3>
<div class="table demo2">
<div class="table-header-group">Table Header</div>
<div class="main table-row">自动占满剩余空间</div>
<div class="table-footer-group">Table Footer</div>
</div>
</body>