块级元素的水平垂直居中的方法

最新推荐文章于 2022-12-22 11:41:55 发布

魏同学.

最新推荐文章于 2022-12-22 11:41:55 发布

阅读量212

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_47627529/article/details/105979823

版权

块级元素的水平垂直居中的方法

  **首先我们要考虑两种情况，定宽高和不定宽高**；

1.有没有宽高都可以
下面两种方法都是需要父相子绝(父块相对定位,子块绝对定位),在子块中设置

方法一 margin:auto

   <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
			
.box1{
    width:100%;
    height:100%;				
    border:1px solid red;					
}
.box2{
    width:400px;
    height:400px;
    background-color:skyblue;
    position: relative;						
}
.box3{
    width:100px;/*1.width:90%也可以 2.不设置宽也可以*/
    height:100px;/*1.height:90%也可以 2.不设置高也可以*/
    background-color: gray;
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    margin:auto;			
}			
</style>
</head>
<body>
<div class="box1">
    <div class="box2">div2<div class="box3">div3</div></div> 
<div>	
</body>
</html>

方法二 transform:translate:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
			
.box1{
    width:100%;
    height:100%;				
    border:1px solid red;					
}
.box2{
    width:400px;
    height:400px;
    background-color:skyblue;
    position: relative;						
}
.box3{
    width:100px;/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
    height:100px;/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
    background-color: gray;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);			
}
</style>
</head>
<body>
<div class="box1">
    <div class="box2">div2<div class="box3">div3</div></div> 
<div>
</body>
</html>

方法三：display:flex;/将其定义为弹性容器/
align-items: center;/垂直居中对齐/
justify-content: center;/水平居中对齐/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
			
.box1{
    width:100%;
    height:100%;				
    border:1px solid red;					
}
.box2{
    width:400px;
    height:400px;
    background-color:skyblue;				
    display:flex;/*将其定义为弹性容器*/
    align-items: center;/*垂直居中对齐*/
    justify-content: center;/*水平居中对齐*/
}
.box3{
    /* 宽高可以不设置
    width:100px;
    height:100px;*/				
    background-color: gray;																		
}
</style>
</head>
<body>
<div class="box1">
	<div class="box2"><div class="box3">div3</div></div> 
<div>
</body>
</html>

2.必须要有宽高
方法一 margin-top margin-left

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
			
.box1{
    width:100%;
    height:100%;				
    border:1px solid red;					
}
.box2{
    width:400px;
    height:400px;
    background-color:skyblue;
    position: relative;						
}
.box3{
    width:100px;/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
    height:100px;/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
    background-color: gray;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;				
}
</style>
</head>
<body>
<div class="box1">
    <div class="box2">div2<div class="box3">div3</div></div> 
<div>		
</body>
</html>