CSS中垂直水平居中三种小方法

来源：互联网发布：java程序员专用壁纸编辑：程序博客网时间：2024/05/30 05:17

以前不太喜欢写博客等，感觉浪费时间，不过入行久了，看到身边的朋友、同事很多在各类技术博客活跃度很高，正所谓近朱则赤嘛，以后有时间了也试着分享一些以前自己学习前端等的一些小经验，希望能帮助一些刚入行的朋友。今天试着先写一下自己用的比较多的三个简单的居中小方法，各位大神不要鄙视我呀，~\(≧▽≦)/~啦啦啦。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直水平居中小方法</title>
<link rel="stylesheet" href="css/cross.css">/* 下面给出三种常见css方法*/
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>

/*接下来出场的是俺老婆，撒花 ~\(≧▽≦)/~ */

法一：绝对定位，需要知道盒子的宽高度。
html,body{
height:100%;
}
.wrapper{
width:300px;
height:300px;
background:#0ff;

position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
}

法二：绝对定位，不需要知道盒子的宽高度。
html,body{
height:100%;
}
.wrapper{
width:300px;
height:300px;
background:#0ff;

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

法三：绝对定位+margin:auto;
html,body{
height:100%;
}
.wrapper{
width:300px;
height:300px;
background:#0ff;

position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}

写博客感觉蛮好玩的，以后还来，哈哈~~

1 0