（1）：text-align + line-height实现单行文本水平垂直居中
<style>
.test{
text-align: center;
line-height: 100px;
}
</style>
<body>
<div class="test" style="width: 200px;">测试文字</div></body> （2）： text-align + vertical-align
<style>
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
</style>
<body>
<div class="parent" style=" width:200px; height:100px;"> <div class="child" style="">测试文字</div> </div>
</body> （3）：margin:0 auto; <body>
<div class="wrap">
<div class="child auto">
non-child
</div>
</div></body><style>
.child{
width: 100px;
height: 100px;
background: green;
box-sizing: border-box;
}
.auto{
margin:0 auto;
}
.wrap{
width: 300px;
height: 200px;
border: 2px solid #ccc;
box-sizing: border-box;
}</style>
（4）：margin-left或margin-right
<style>
.child{
width: 100px;
height: 100px;
background: green;
box-sizing: border-box;
}
.margin{
margin-left:100px;
}
.wrap{
width: 300px;
height: 200px;
border: 2px solid #ccc;
box-sizing: border-box;
}</style><body>
<div class="wrap">
<div class="child margin">
non-child
</div>
</div></body>
（5）:transform<style> #container{ position: relative; height: 200px; background: #333; } #center-div{ position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); } </style> <body> <div id="container"> <div id="center-div"> xxx </div> </div> </body>
（6）：margin-top或margin-bottom<style>
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
box-sizing: border-box;
}
.div1{
width:100px ;
height: 100px;
box-sizing: border-box;
background: darkblue;
}
.margin{
margin-top: 100px;
}</style>
<body>
<div class="wrap ">
<div class="div1 margin">111111</div>
</div>
</body> （7）：padding-top或padding-bottom<style>
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
box-sizing: border-box;
}
.padding{
padding-top: 100px;
}
.div1{
width:100px ;
height: 100px;
box-sizing: border-box;
background: darkblue;
}</style><body>
<div class="wrap padding">
<div class="div1 ">111111</div>
</div></body>
（8）：vertical-align:middle
<style>
.parent{
text-align: center;
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
</style>
<body>
<div class="parent" style=" width:200px; "> <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test"> </div> </body>
时间： 2024-08-07 08:38:46