您的位置：首页 > Web前端 > CSS

欢迎使用CSDN-markdown编辑器

2016-07-08 11:13 721 查看

css中div在另一个div水平垂直居中问题

css中水平居中相对垂直居中来说比较好实现，一般只需要设置margin-left,margin-right这两个属性，

margin-left:auto;
margin-right:auto;


以上两行代码就可以使当前的div处于水平居中，对于垂直居中，如果是相对怎个页面来说，可以用一下实现

margin:50% auto;


当然如果你想让一个div在另一个div水平垂直居中的话，以上的代码是不行的。

我们需要用其他方式实现，这里我提供一个方法，使用相对定位来实现的，以下为具体实现方式：

html代码：

<html>
<body>
<div class="container">
<div class="box"></div>
</div>
<body>
<html>


css代码：

.container{
width:200px;
height:200px;
background-color:red;
margin:50% auto;
}
.box{
width:100px;
height:100px;
position:relative;
left:50px;
top:50px;
}


以上代码就可以实现在一个div中的水平垂直居中了，大家可以根据自己的需求对参数进行调整，这里只是给大家一个思路！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css-垂直水平居中
相关文章推荐
新的分享
章节导航