一、水平
1、利用{margin:auto;width:50%;}来进行水平居中；
2、利用{text-align:center;}进行文字的水平居中；
二、垂直
1、利用padding-top内边距设置实现垂直居中
2、利用{height:300px;inline-height:300px;} 高度=行高来进行垂直居中。
3、利用position和transform进行垂直居中。（这种方法也必须先知道height是多少）
<html>
<head>
<style>
.center{
margin: auto;
width: 60%;
text-align: center;
background-color: lightgrey;
height: 200px;
line-height: 200px;
}
</style>
</head>
<body>
<div class="center">
<p>水平居中了吗，垂直居中了吗？</p>
</div>
</body>
</html>使用inline-height=height进行垂直居中。
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center1 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
/* -ms-transform: translate(-50%, 50%); */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="center">
<p class="center1">水平居中了吗，垂直居中了吗？</p>
</div>
</body>
</html>使用position+transform的办法进行垂直居中。
1470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
