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

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>
其他:

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

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

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

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

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

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭