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

来源：互联网发布：ubuntu手机版编辑：程序博客网时间：2024/06/08 18:45

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

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

<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;}
```
（待扩充）

阅读全文

0 0