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

css中已知宽高的子元素水平垂直居中的三种方法

2017-08-04 22:33 381 查看

元素水平垂直居中三种的方法

设置两个盒子，关系是父与子：

<body>
<div id="wrap">
<div id="inner">
inner
</div>
</div>
</body>

方法一：

将父元素的width和height设置的和子元素的大小一样，然后设置父元素wrap的padding。此时padding会将子元素挤进父元素的中间位置；

此时父、子元素的定位是否开启都可以；

*{
margin: 0;
padding: 0;
}

#wrap{

width: 100px;
height: 100px;
/*将padding设置，来挤出来居中的样子；但是要注意的是，此时的width和height要和子元素的大小一样，否则还是不居中*/
padding: 100px;
border: 1px solid;
margin: 100px auto;
}

#inner{

width: 100px;
height: 100px;
background: pink;
line-height: 100px;
text-align: center;
}

方法二：

父元素相对定位，子元素绝对定位；

绝对定位盒子模型有个特点：left+right+width+padding+margin=包含块的宽度；所以此时可以将left、right（默认值为auto，所以需要重设置）设置为0，而padding已经确定（未设置时默认值为0px），所以剩下的都是margin，但是margin的默认值是0px。所以就将magin设为auto，使得元素自动居中了；

即：left、right、top、bottom为0；margin为auto;

*{margin: 0;padding: 0;}

#wrap{

position: relative;
width: 200px;
height: 200px;
/*padding: 100px;*/
border: 1px solid;
margin: 100px auto;
}

#inner{

position: absolute;
/*left+right+width+padding+margin=包含块的宽度*/
/*0 0 100 0 auto =300*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: pink;
line-height: 100px;
text-align: center;
}

方法三：

父元素相对定位，子元素绝对定位；

将子元素left和right直接设为50%，相对的是父元素；

然后在使用margin-left和margin-top设为子元素的一半的负数。就是将偏离父元素中心的那段拽回来；

#inner{

position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: pink;
line-height: 100px;
text-align: center;
}

（待扩充）

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

标签：

相关文章推荐

新的分享

章节导航