您的位置：首页 > 其它

水平垂直居中

2017-03-07 10:59 127 查看

1.法一

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
.parent{
position: absolute;
height:100%;
width:100%;

background: grey;
}
.child{
height:300px;
width: 200px;
position: relative;
/*position: absolute;也可*/
top:50%;
left:50%;
margin: -150px 0 0 -100px;

/*块内文字水平垂直居中*/
text-align: center;
line-height: 300px;/*与height保持同值*/

background:green;
}
</style>
</head>
<body>

<div class="parent">
<div class="child">水平、垂直居中</div>
</div>

</body>
</html>

执行：

2.法二

将.child中的margin: -150px 0 0 -100px;

换成transform: translate(-50%,-50%);

transform为CSS3属性，它可以向元素使用2D 或 3D 转换，进行旋转、缩放、移动或倾斜。

translate(x,y)定义了 2D 转换。

3.法三

使用flex

justify-content:center;定义容器中项目在主轴上（即水平方向上）居中。
align-items:center;定义容器中项目在交叉轴上（即垂直方向上）居中。

.parent{
position: absolute;
height:100%;
width:100%;

display: flex;
justify-content:center;
align-items:center;

background: grey;
}
.child{
height:300px;
width: 200px;

/*!*块内文字水平垂直居中*!*/
text-align: center;
line-height: 300px;/*与height保持同值*/

background:green;
}

4.法四

使用定位与margin

.parent{
position: absolute;
height:100%;
width:100%;

background: grey;
}
.child{
height:300px;
width: 200px;

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

/*!*块内文字水平垂直居中*!*/
text-align: center;
line-height: 300px;/*与height保持同值*/

background:green;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 水平垂直居中

相关文章推荐

新的分享

章节导航