@TOC
注意：margin: 0 auto;居中显示只能要求在块元素中，并且块元素由固定的宽度
一、文本所在标签居中
1、P标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文本居中</title>
<style>
.p1{
text-align: center;
}
</style>
</head>
<body>
<p class="p1">你看我是不是居中显示</p>
</body>
</html>
2、div块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文本居中</title>
<style>
.p1{
text-align: center;
}
.div1{
text-align: center;
}
</style>
</head>
<body>
<p class="p1">你看我P标签是不是居中显示</p>
<div class="div1">你看我DIV标签是不是居中显示</div>
</body>
</html>
3、div块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文本居中</title>
<style>
.div1{
width: 90px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="div1">你看我DIV标签是不是居中显示</div>
</body>
</html>
二、文本居中
1、div块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文本居中</title>
<style>
.div1{
text-align: center;
}
</style>
</head>
<body>
<div class="div1">
<text>你看我是不是居中显示</text>
</div>
</body>
</html>
2、table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文本居中</title>
<style>
.div1{
text-align: center;
}
</style>
</head>
<body>
<div class="div1">
<table border="1" align="center">
<tr>
<td>姓名</td>
<td>学号</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>001</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>002</td>
<td>19</td>
</tr>
</table>
</div>
</body>
</html>
3、多行文本在块中心居中显示
<view class="wxMain">
<navigator class="box" wx:for="{
{8}}">
<image class="pic" src="/images/xszp1.jpg"></image>
<view class="ceng">
<view class="tit">UI设计作品</view>
<view class="line"></view>
<view class="des">UI design works</view>
</view>
</navigator>
</view>
.wxMain{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.wxMain .box{
width: 344rpx;
height: 214rpx;
margin-bottom: 10rpx;
position: relative;
}
.wxMain .pic{
width: 100%;
height: 100%;
}
.wxMain .ceng{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
position: absolute;
/*设置居中显示*/
top:0;
left: 0;
color:#fff;
display: flex;//使用flex布局
flex-direction: column;//纵向分布
justify-content: center;//分布放置为中心
align-items: center;//放置水平居中
}
三、块居中
1、两个div块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div块居中</title>
<style>
.div1{
width: 500px;
height: 300px;
margin: 0 auto;
/*text-align: center;*/
position: relative;
background-color: dodgerblue;
}
.div2{
width: 300px;
height: 200px;
text-align: center;
background-color: lawngreen;
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.txt{
/*margin:0 auto;*/
height: 200px;
line-height: 200px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<text class="txt">你看我是不是居中显示</text>
</div>
</div>
</body>
</html>
