CSS水平居中6种方法 与 CSS水平垂直居中7中方式

一： 水平居中

1. margin: 0 auto (设置当前元素)

  
  

    
水平居中
  

.center p {
  width: 200px;
  margin: 0 auto;
  background-color: #555;
}

2. 父元素设置: text-align: center

 1. 只能对图片, 按钮, 文字等 行内元素 (display为inline 或 inline-block等) 进行水平居中 。
 2.  在 IE6、7 这两个奇葩的浏览器中, 它是能对任何元素进行水平居中的 。

  
  

    按钮
  

.center2 {
    text-align: center;
}

3. 浮动《 结合 position:relative 》实现水平居中

  
  

    

      
Prev
      
1
      
2
      
3
      
4
      
5
      
Next
    
  

.pagination {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: bisque;
}
.pagination ul {
  clear: left;
  float: left;
  position: relative;
  left: 50%;
  text-align: center;
  background-color: #666;
}
.pagination li {
  line-height: 25px;
  margin: 0 5px;
  display: block;
  float: left;
  position: relative;
  right: 50%;
}
.pagination a {
  display: block;
  color: #f2f2f2;
  text-shadow: 1px 0 0 #101011;
  padding: 0 10px;
  border: 1px solid #333;
  border-radius: 2px;
}
.pagination a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
  background: linear-gradient(top, #f48b03, #c87100);
}

4. position:absolute 绝对定位实现水平居中

1. 适用于父元素和子元素的宽度都确定的情况 。
2. 父元素 position: relative; 子元素给剩余宽度一半的 margin-left 。

  
  

    
水平居中方法 4
  

.out {
  background-color: #c87100;
  width: 100%;
  position: relative;
  height: 300px;
}
.in {
  position: absolute;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  background-color: blueviolet;
}

5. display:flex 弹性布局实现居中

6. 通过 transform 实现 CSS 水平居中

二： 垂直居中

1. 在父元素中设置 display: table-cell 属性 <此元素会作为一个表格单元格显示>, 结合 vertical-align: middle;

  

    垂直居中
  

.box1{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: red;
  height: 300px;
  width: 800px;
}

2. 父元素使用弹性布局 display : flex; align-items:center;

  

    垂直居中
  

.box2{
  display: flex;
  justify-content:center;
  align-items:Center;
  height: 300px;
  width: 800px;
  background-color: red;
}

3. 父元素设置 display: flex 和 子元素设置 margin: auto

  

    
垂直居中
  

.box8{
  display: flex;
  text-align: center;
  height: 300px;
  width: 100%;
  background-color: red;
}
.box8 div{
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: brown;
}

4. 父元素相对定位 position:relative, 子元素绝对定位 position: absolute 和 负 margin

  

    垂直居中
  

.box3{
  position:relative;
  height: 300px;
  width: 800px;
  background-color: red;
}
.box3 span{
  position: absolute;
  width:100px;
  height: 50px;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-25px;
  text-align: center;
}

5. 父元素设置 position: relative 相对定位; 子元素设置 position: absolute; transform:translate(-50%,-50%);

  

    垂直居中
  

.box6 {
  height: 300px;
  width: 100%;
  background-color: red;
  position: relative;
}
.box6 span{
  position: absolute;
  top:50%;
  left:50%;
  width: 200px;
  transform:translate(-50%,-50%);
  text-align: center;
  background-color: cadetblue;
}

6. 父元素 position: relative 相对定位, 子元素 position: absolute 绝对定位和 0《做遮罩可以使用》

  

    垂直居中
  

.box4 {
  height: 300px;
  width: 100%;
  background-color: red;
  position: relative;
}
.box4 span{
  width: 200px;
  height: 200px;
  background-color: cadetblue;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

7. 父元素 display:inline-block 和 :after 来占位

  

    
垂直居中
  

.box7{
  text-align:center;
  font-size:0;
  height: 300px;
  width: 100%;
  background-color: red;
}
.box7 div{
  vertical-align:middle;
  display:inline-block;
  font-size:16px;
  width: 100px;
  height: 100px;
  background-color: brown
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}