css水平垂直居中方法（全网最全）

lduzhenlin

已于 2022-07-15 17:36:38 修改

阅读量8.6k

点赞数 29

分类专栏： # css 文章标签： css html 前端

于 2019-04-16 14:26:58 首次发布

本文链接：https://blog.csdn.net/lduzhenlin/article/details/89331516

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.脱离文档流

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

有三种方式:

有无宽高都可
    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:400px;
    height:400px;
    background-color: bisque;
    position: relative;						
}
.box2{
    width:100px;/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
    height:100px;/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
    background-color: aqua;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);			
}
</style>
</head>
<body>

<div class="box1">
    <div class="box2"></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:400px;
    height:400px;
    background-color:bisque;
    position: relative;						
}
.box2{
    width:100px;/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
    height:100px;/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
    background-color: aqua;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;				
}
</style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
    </div> 
	
</body>
</html>

方法二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				position:relative;
				width: 300px;
				height: 300px;
				background-color: blanchedalmond;
			}
			.box2{
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: aqua;
				top:0;
				left: 0;
				bottom: 0;
				right: 0;
				margin:auto;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></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>