css 水平居中，垂直居中

2020-04-21 12:08:57 阅读：229 来源： 互联网

标签：居中 box 100px 300px height 垂直 width css

<div class="box">
   <img src="./1.jpg" alt=""/>
</div>

第一种：水平居中

.box {
  width:300px;
  height:300px;
  border:2px solid red;
}
img{
  display:block;
  width:100px;
  height:100px;
  margin:0 auto;
}

第二种：水平居中

.box{
  width:300px;
  height:300px;
  border:2px solid red;
  text-align:center;
}
img{
  width:100px;
  height:100px;
  display:inline-block;
}

第三种：水平垂直居中定位+需要居中元素的margin减去宽高的一半(取负值)

.box {
  width:300px;
  height:200px;
  border:1px solid red;
  position:relative;
}
img{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-50px;
}

第四种：水平垂直居中定位+margin:auto

.box{
  width:300px;
  height:200px;
  border:1px solid red;
  position:relative;
}
img{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:0 auto;
}

第五种：水平垂直居中定位+transform

.box {
  width:300px;
  height:200px;
  position:relative;
  border:1px solid red;
}
img{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

第六种：水平垂直居中 display:table-cell

.box{
  width:300px;
  height:200px;
  border:2px solid red;
  display:table-cell;
  verticall-align:middle;
  text-align:center;
}
img{
  width:100px;
  height:100px;
}
.box-table{
  display:table
}
<div class="box-table">
  <div class="box">
    <img src="./1.jpg" alt=""/>
  </div>
</div>

第七种：垂直水平居中 flex

.box{
  width:300px;
  height:200px;
  border:1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}
img{
  width:100px;
  height:100px;
}

标签：居中,box,100px,300px,height,垂直,width,css
来源： https://www.cnblogs.com/sunnyeve/p/12743576.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css 水平居中，垂直居中