水平垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布

程小秋

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量282

点赞数

CSS:水平垂直居中

已知高度宽度的水平垂直居中

1、绝对定位+负边距：将top、left设置为50%，再用margin将盒子拉回它本身的一半。

*{
	margin:0;
	padding:0;
	list-style:none;
}
.content{
        position:absolute;
	top:50%;
	left:50%;
	margin:-100px 0 0 -100px;
	width:200px;
	height:200px;
	background-color:#CF6;
}
.wrap{
	height:500px;
	width:100%;
	background-color:#F00;
	position:relative;
}
<div class="wrap">
  <div class="content">水平垂直居中</div>  
</div>

2、绝对定位+margin

*{
	margin:0;
	padding:0;
	list-style:none;
}
.content{
        position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	width:70%;
	height:200px;
	background-color:#CF6;
}
.wrap{
	height:500px;
	width:100%;
	background-color:#F00;
	position:relative;
}
<div class="wrap">
  <div class="content">水平垂直居中</div>  
</div>

不知高度和宽度的水平垂直居中

1、当元素为inline或inline-block时，可以将父元素设置为display:table-cell;text-align:center;vertical-align:middle;

.wrap{
	background-color:#F00;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
<div class="wrap">
  <div class="content">水平垂直居中</div>  
</div>

2、css3的transform

.wrap{
	background-color:#F00;
	position:relative;
	width:500px;
	height:200px;
}
.content{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	background-color:#C03;
}
<div class="wrap">
  <div class="content">水平垂直居中</div>  
</div>

3、利用flex

.wrap{
	background-color:#F00;
	display:flex;
	justify-content:center;
	align-items:center;
	width:500px;
	height:200px;
}
<div class="wrap">
  <div class="content">水平垂直居中</div>  
</div>