未知宽度元素居中

前端之家收集整理的这篇文章主要介绍了未知宽度元素居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. flex布局

.parent{
 width:600px;
  height:300px;
  background:red;
  display:flex; 
  justify-content: center; 
  align-items: center; 
}
.child{
  background:green; 
}

2. 定位+transform

.parent{
 width:600px;
  height:300px;
  background:red;
  position:relative; 
}
.child{
  background:green;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

3. text-align+inline-block

.parent{
 width:600px;
  height:300px;
  background:red;
  text-align:center; 
}
.child{
  background:green;  
  display:inline-block;
}

猜你在找的程序笔记相关文章