html中dom居中的5种方式

标签：样式   charset   document   view   wrapper   items   transform   行内元素   splay   

公共样式

.wrapper{
 width: 300px;
 height: 300px;
 background-color: chartreuse;
 margin-right: 30px;
 display: inline-block;
}
.content{
 width: 100px;
 height: 100px;
 background-color: rgb(30, 210, 195);
 font-size: 20px;
 line-height: 100px;
 text-align: center;
}

1、position定位（细分为3种）

.wrapper1{
  position: relative;
}
.content1{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.wrapper2{
  position: relative;
}
.content2{
  position: absolute;
  margin-left: 50%;
  margin-top: 50%;
  transform: translate(-50%, -50%);
}

.wrapper3{
  position: relative;
}
.content3{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2、行内元素居中

.wrapper4{
  text-align: center;
  line-height: 300px;
  vertical-align: top;
}
.content4{
  display: inline-block;
  vertical-align: middle;
}

3、弹性盒子布局

.wrapper5{
  display: flex;
  align-items: center;
  justify-content: center;
}

具体代码如下：

    
1
  
  

    
2
  
  

    
3
  
  

    
4
  
  

    
5
  

html中dom居中的5种方式

标签：样式   charset   document   view   wrapper   items   transform   行内元素   splay   

原文地址：https://www.cnblogs.com/haozehua/p/13179802.html