1.已知宽度高度，绝对定位之负边距margin
<style>
.absolute-center{
position:absolute;
width:100px;
height:100px;
left:50%;
top:50%;
margin:-50px 0 0 -50px;
border:1px solid #ddd;
background-color:red;
}
</style>
</head>
<body>
<div class="absolute-center">
绝对定位<br>
垂直居中<br>
</div>
</body>
2.line-height 方式，适用于文本居中
<style type="text/css">
.container{
width: 200px;
height: 100px;
line-height: 100px;
background-color:#ddd;
}
</style>
</head>
<body>
<div class="container">
我是line-height
</div>
3.Inline-block
<style>
html,body,.outer{
height:100%;
}
.outer{
border:1px solid red;
text-align:center;
}
.outer:after{
content:‘‘;
display:inline-block;
vertical-align:middle;
height:100%;
}
.inner{
background-color:#f0f0f0;
display:inline-block;
resize:both;
overflow:hidden;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
我垂直居中
</div>
</div>
</body>
时间： 2024-10-23 09:39:52