这里总结了四种方式:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>CSS</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,menu,p,blockquote,ol,ul,dl,dd,td,th,figure,pre,button,input,textarea{
margin:0 auto;padding:0;
}
body{
font: normal 100% "微软雅黑";color:#000;font-size:14px;width:100%;background-color:#f1f2f7;
}
section {
margin: 0 auto;
position:relative;
width:500px;
height:400px;
}
.bg-color-a{
background-color:honeydew;
}
.bg-color-b{
background-color:yellowgreen;
}
.bg-color-c{
background-color:lightyellow;
}
.bg-color-d{
background-color:ghostwhite;
}
.my-div {
width:400px;
height:200px;
border:1px solid #00F;
}
/*方式一、绝对定位 position: absolute;left:50%;top:50%;margin-left:-200px;margin-top:-100px;*/
.center-1 {
position: absolute;
left:50%;/*外框 x轴 移到中心点*/
top:50%; /*外框 y轴 移到中心点*/
margin-left:-200px;/* x轴减width/2 */
margin-top:-100px;/* y轴减height/2 */
text-align: center;/*内容x轴居中*/
line-height: 200px;/*内容y轴居中*/
}
/*方式二、 相对定位 position: relative; margin: 0 auto; top:50%; transform:translateY(-50%); */
.center-2 {
position: relative;
margin: 0 auto;/*外框 x轴左右居中*/
top:50%;/*外框 y轴垂直居中 到中心点*/
transform:translateY(-50%);/*外框 y轴 垂直上移自身高度的50% */
text-align: center;/*内容x轴居中*/
line-height: 200px;/*内容y轴居中*/
}
/*方式三、 绝对定位 position: absolute; top:50%;left:50%; transform:translate(-50%,-50%); */
.center-3 {
position: absolute;
top:50%;/*外框 y垂直居中 到中心点*/
left:50%;/*外框 x垂直居中 到中心点*/
transform: translate(-50%, -50%);/*外框 垂直上移自身高度的50%,左移自身高度的50% */
text-align: center;/*内容x轴居中*/
line-height: 200px;/*内容y轴居中*/
}
/*方式四、 display:flex; */
.center-4 {
display:flex;
justify-content:center;/*外框与内容x轴垂直居中*/
align-items: center;/*外框与内容y轴垂直居中*/
flex-wrap: wrap;
/*align-content:center;多行整体效果时使用*/
text-align: center;/*内容有多行时x轴居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<!--方式一、绝对定位 position: absolute;left:50%;top:50%;margin-left:-200px;margin-top:-100px;-->
<section class="bg-color-a">
<div class="my-div center-1">我要垂直居中1</div>
</section>
<hr/>
<!--方式二、相对定位 position: relative; margin: 0 auto; top:50%; transform:translateY(-50%);-->
<section class="bg-color-b">
<div class="my-div center-2">我要垂直居中2</div>
</section>
<hr/>
<!--方式三、绝对定位 position: absolute; top:50%;left:50%; transform:translate(-50%,-50%);-->
<section class="bg-color-a">
<div class="my-div center-3">我要垂直居中3</div>
</section>
<hr/>
<!--方式四、display:flex;-->
<section class="bg-color-b center-4">
<div class="my-div center-4">
<div style="padding:15px;background-color:gold;">我要垂直居中4<br>啊啊啊啊啊啊啊啊</div>
<div style="padding:15px;background-color:goldenrod;">我要垂直居中4</div>
<div style="padding:15px;background-color:gray;">我要垂直居中4</div>
<div style="padding:15px;background-color:gold;">我要垂直居中4<br>啊啊啊啊啊啊啊啊</div>
<div style="padding:15px;background-color:goldenrod;">我要垂直居中4</div>
<div style="padding:15px;background-color:gray;">我要垂直居中4</div>
</div>
</section>
<hr/>
</body>
</html>
如图: