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

最新推荐文章于 2021-08-20 13:10:37 发布

web-小徐

最新推荐文章于 2021-08-20 13:10:37 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/weixin_43858667/article/details/89959603

版权

一.脱离文档流

只要是脱离文档流,都是使用的是父相子绝(父块相对定位,子块绝对定位),

有三种方式:

有无宽高都可
    1.父相子绝 可以使用 margin:auto
    2.父相子绝 transform:translatex
有宽高
    3.父相子绝 margin-top 一半

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>

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>

二.没有脱离文档流

有3种方法

有无宽高都可:
1.(父)
  display:flex;/*将其定义为弹性容器*/
  align-items: center;/*垂直居中对齐*/
  justify-content: center;/*水平居中对齐*/
 
2.
 (父)display:flex
 (子)margin:auto
 
有宽高
1.
 (父)display:table-cell;
    vertical-align: middle;(垂直居中)
 (子)margin:0 auto(水平居中)

1.有无宽高都可

方法一:

<!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>

方法二:

<!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;
    display:flex;/*最新特性*/					
}
.box3{
    /*有无宽高都可以*/
    /*width:100px;
    height:100px;*/				
    background-color: gray;		
    margin:auto;							
}
</style>
</head>
<body>
<div class="box1">
    <div class="box2"><div class="box3">div3</div></div> 
<div>
</body>
</html>

2.有宽高

<!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: table-cell;
    vertical-align: middle;								
}
.box3{
    width:100px;
    height:100px;
    background-color: gray;
    margin:0 auto;/*子块设置水平居中*/						
}
</style>
</head>
<body>
<div class="box1">
    <div class="box2">div2<div class="box3">div3</div></div>
<div>		
</body>
</html>

web-小徐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
块级元素水平垂直居中方法

一.脱离文档流只要是脱离文档流,都是使用的是父相子绝(父块相对定位,子块绝对定位),有三种方式:有无宽高都可 1.父相子绝可以使用 margin:auto 2.父相子绝 transform:translatex有宽高 3.父相子绝 margin-top 一半1.有没有宽高都可以下面两种方法都是需要父相子绝(父块相对定位,子块绝对定位),在子块中设置方法一 ...
复制链接

扫一扫