CSS 中各种居中方式

一、水平居中

1. 内联元素

如果想设置内联元素居中，仅需在内联元素的外层添加一个块级父元素，然后设置：

<div class="center-children">
    <a>我是内联元素，我要水平居中哦！</a>
</div>
.center-children {
  text-align: center;
}

2.块级元素

如果设置块级元素居中，要将块级元素的 margin-left 和 margin-right 属性设置成auto，并且块级元素一定要设置宽度，否则元素默认为100%宽度，不需要居中。

<div class="center-me">
    我是块级元素，我要水平居中
</div>
.center-me {
  width:200px;
  margin: 0 auto;
}

3.两个以上块级元素

如果想把两个以上块级元素居中，我们要将子元素设置成内联元素
方法1

<div class="wrapper">
    <div>
        我想水平居中
    </div>
    <div>
        我想水平居中
    </div>
    <div>
        我想水平居中
    </div>
</div>
.wrapper{
  text-align:center;
}
.wrapper div{
  display:inline-block;
  background-color:#000;
  color:#fff;
}

方法2 使用 flexbox

<div class="wrapper">
    <div>
        我想水平居中
    </div>
    <div>
        我想水平居中
    </div>
    <div>
        我想水平居中
    </div>
</div>
.wrapper{
  display:flex;
  justify-content:center;
}
.wrapper div{
  background-color:#000;
  color:#fff;
  margin-left:10px;
}

二、垂直居中

1.内联元素

方法1

<div class="wrapper">
    我要垂直居中
</div>
.wrapper{
 background-color:#000;
 padding:40px 40px;
 color:#fff;
}

方法2

<div class="wrapper">
    我要垂直居中
</div>
.wrapper{
 background-color:#000;
 color:#fff;
 height:100px;
 line-height:100px;
}

方法3 设置padding可以可以实现多行内容居中，我们也可以通过设置display:table来垂直居中多行内容

<div class="wrapper">
    <p>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</p>
</div>
.wrapper{
   display:table;
   background-color:#000;
   color:#fff;
   width:200px;
   height:200px;
}
.wrapper div{
  display:table-cell;
  vertical-align:middle;
}

方法4使用flexbox(父级元素要设置高度哦)

<div class="wrapper">
    <p>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</p>
</div>
.wrapper{
 display:flex;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
 flex-direction: column;
 justify-content: center;
}

2.块级元素

方法1 元素宽度高度固定

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
 position:relative;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
}
.wrapper div {
  position: absolute;
  background-color:red;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 100px;
  margin-top: -70px;
  background: black;
  color: white;
  padding: 20px;
}

方法2 元素宽度高度不固定

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
 position:relative;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
}
.wrapper div {
  position: absolute;
  top: 50%;
  transform:translateY(-50%);
  background-color:red;
}

方法3 使用 flexbox

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
 display:flex;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
 flex-direction: column;
 justify-content: center;
}

三、水平和垂直居中

方法1 元素宽度高度固定

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
 position:relative;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
}
.wrapper div {
  position: absolute;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-50px;
  background-color:red;
}

方法2 元素宽度高度不固定

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
 position:relative;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
}
.wrapper div {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background-color:red;
}

方法3 使用 flexbox

<div class="wrapper">
    <div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
 display:flex;
 background-color:#000;
 color:#fff;
 width:200px;
 height:200px;
 justify-content:center;
 align-items: center;
}
.wrapper div {
  width:100px;
  height:100px;
  background-color:red;
}

四、总结

以上就是 CSS 的各种居中方式啦，要灵活使用哦！

对学习抱有热情的开发小伙伴欢迎加入 qq群685421881，群主女孩，更欢迎热爱编程的妹子进入，让我们一起学习 并进步吧！