css多种方法实现元素居中

最新推荐文章于 2023-09-01 18:02:48 发布

hua_ban_yu

最新推荐文章于 2023-09-01 18:02:48 发布

阅读量227

点赞数

分类专栏：前端 css 文章标签： css垂直水平居中 css居中 css水平居中 css元素居中

本文链接：https://blog.csdn.net/hua_ban_yu/article/details/80912877

版权

前端同时被 2 个专栏收录

73 篇文章 6 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

1.利用position 生成绝对定位的元素进行水平垂直居中，该方法需要知道元素的宽、高

.test{
      width : 300px;
      height : 200px;
      background-color: #ddd;
      position : absolute;
      left : 50%;
      top : 50%;
      margin-left : -150px; /*一半的高度*/
      margin-top : -100px;  /*一半的宽度*/
      border:1px solid #ddd;
}

2.使用css3的transform设置元素进行水平垂直居中，不需要知道元素的宽、高

.test{
	width : 300px;
	height : 200px;
	background-color: #ddd;
    	position: absolute; 
    	left: 50%; 
    	top: 50%;
    	transform: translate(-50%, -50%); 
}

3.使用position生成绝对定位与margin:auto结合让元素进行水平垂直居中，改方法需要设置元素的宽、高

.test {
	width : 300px;
	height : 200px;
	background-color: #ddd;
	position: absolute;
	left: 0; 
	top: 0; 
	right: 0; 
	bottom: 0;
	margin: auto;    /* 使用margin进行自动水平垂直居中*/
}