子元素在父元素中上下左右居中

1.将父元素与子元素宽高设置相同,此时在父元素中设置上、右、下、左为相等内边距值。[不推荐使用]

此处注意内边距的百分比,不论上下左右,均是相对于父元素的width来计算的,与父元素的height无关;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.box-one{
		width:50px;            /*指定父级元素宽度,否则默认为浏览器宽度*/
		background-color:red;
		/*padding-top:20%;    将padding的四个值分开写
		padding-bottom:20%;
		padding-left:20%;
		padding-right:20%;*/
		padding:20%;		
	}
	.box-two{
		width:50px;
		height:50px;
		background-color:blue;	
	}
</style>
</head>
<body>
	<div class="box-one">
		<div class="box-two"></div>
	</div>
</body>
</html>

2.margin:auto在绝对定位下水平垂直居中                                               [需知子元素长宽,尽量避免运用定位 不推荐]

 具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.father{
		width:200px;
		height:200px;
		position:relative;
		background-color:red;
		
	}
	.son{
		position:absolute;
		width:100px;
		height:100px;
		background-color:blue;
		top:0;left:0;right:0;bottom:0;/*在距离父级元素的上下左右各自值之后围成的区域之中进行下面的水平和垂直居中*/
		margin:auto;
	}
</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

3.利用弹性盒子(flex)                                                                                                [推荐]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.father {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.son{
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>

<div class="father">
  <div class="son">Perfect centering!</div>
</div>

</body>
</html>
将父级元素设置为弹性容器,在其子元素中设置margin:auto;即可实现居中。


                                                                                                                                            [推荐]

4.利用绝对定位,transform(css3)兼容性不好,IE10+以及其他现代浏览器才支持, IE9(-ms-), IE10+以及其他现代浏览器才支持。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.father{
		width:200px;
		height:200px;
		position:relative;
		background-color:red;
		
	}
	.son{
		position:absolute;
		width:100px;
		height:100px;
		background-color:blue;
		top:50%;left:50%;                   /*绝对定位将子元素左上顶点置于父元素的正中心,后利用transform进行偏移*/
		transform:translate(-50%,-50%);    /*translate移动为相对自身的宽高*/
	}
</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>

</body>
</html>
其他:

                文档流是相对于盒子模型讲的,文本流是相对于文字段落讲的;

    浮动会让元素跳出文档流:

    即当浮动元素后面还有元素时,其他元素会无视它所占据的区域,直接在它层下布局(覆盖效果);

    但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是浮动元素没有脱离文本流。    绝对定位会让元素脱离文档流和文本流:

    后面的文字不会认同元素所占据的区域,直接在其层下布局(覆盖效果)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值