css3实现垂直水平居中7种方法

最新推荐文章于 2023-04-30 15:50:55 发布

满楼、

最新推荐文章于 2023-04-30 15:50:55 发布

阅读量442

点赞数

分类专栏： css 前端文章标签： css css3 flex 定位

本文链接：https://blog.csdn.net/weixin_42367288/article/details/108194822

版权

前端同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

1、知道子级宽高固定 (定位 +负margin)

  <view class="parent-box">
   <view class="children">
   </view>
  </view>

.parent-box{
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);  
  -ms-transform: translate(-50%,-50%);  
  transform: translate(-50%,-50%); 
}

2、也需要知道子级宽高固定 (定位 + margin auto)

.parent-box{
border: 2rpx solid red;
position:relative;
width:600rpx;
height:600rpx;
}
.children{
position:absolute;
background:green;
width:200rpx;
height:200rpx;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

3.、也需要知道子级宽高固定 (定位 + calc [为css3计算属性])

.parent-box{
border: 2rpx solid red;
position:relative;
width:600rpx;
height:600rpx;
}
.children{
position:absolute;
background:green;
width:200rpx;
height:200rpx;
top:calc(50% - 100rpx); //减去子级宽高的一半(注意空格,不要写成 负宽高 ,需要加空格)
left:calc(50% - 100rpx);
}

4、不需要知道子级的宽高 (定位 + transform)

.parent-box{
border: 2rpx solid red;
position:relative;
width:600rpx;
height:600rpx;
}
.children{
position:absolute;
background:green;
width:200rpx;
height:200rpx;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}

5、利用行内元素居中属性

.parent-box{
	line-height:600rpx;
	text-align:center;
	font-size:0rpx;
  background: #007AFF;
}
.children{
	font-size:32rpx;
	display:inline-block;
	vertical-align:middle;
	line-height:initial;
 	background: #4CD964;
}

6、利用css3新增的table属性

.parent-box{
	border: 2rpx solid red;
	width:600rpx;
	height:600rpx;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	
}
.children{
	background:green;
	width:200rpx;
	height:200rpx;
	display:inline-block;
}

7、最新的 flex布局

.parent-box{
	border: 2rpx solid red;
	width:600rpx;
	height:600rpx;
    display:flex;
	justify-content:center;
	align-items:center;
}
.children{
	background:green;
	width:200rpx;
	height:200rpx;
}