当前位置： 移动技术网 > IT编程>网页制作>CSS > 中间盒子自适应居中常用的几种方式(代码实例)

中间盒子自适应居中常用的几种方式(代码实例)

2018年04月04日  | 移动技术网IT编程  | 我要评论

中间盒子自适应居中常用的几种方式(代码实例)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
	/*1.父元素加相对定位,子元素且对定位*/
#parent{ 

    width: 500px;

    height: 500px; 

    background-color: #f00;

    /*父元素加相对定位*/

    position:relative; 

    }

#child{ 

    width: 200px;

    height: 200px; 

    background-color: #0f0;

/*子元素加绝对定位,向下左右0*/

    position: absolute; 

    top:0; 

    left:0;

      bottom:0; 

    right:0; 

    margin:auto; 

    }	

	/*2.父元素加display: table-cell;vertical-align: middle;text-align: center; 子元素加:display: inline-block;*/
	
	/*3.如果知道子元素宽高,父元素加:position: relative;子元素加: position: absolute; top:50%;left:50%;margin-top:-100px;margin-left:-100px;*/
</style>

</head>

<body>

    <pid="parent">

        <pid="child"></p>

    </p>

</body>

</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网