CSS中的元素居中

水平居中

• 内联级或类似内联级的元素

  如果需要居中的元素是内联元素（display为inline or inline-*），如text或a时，则可以将其放在块级父元素中，像这样：

.center-children {
  display:block;
  text-align: center;
}

这对display为 inline, inline-block, inline-table, inline-flex等样式的元素有用。

源码：

HTML

<header>  This text is centered.</header>

<nav role=‘navigation‘>  <a href="#0">One</a>  <a href="#0">Two</a>  <a href="#0">Three</a>  <a href="#0">Four</a></nav> 

CSS

body {  background: #f06d06;}

header, nav {  text-align: center;  background: white;  margin: 20px 0;  padding: 10px;}

nav a {  text-decoration: none;  background: #333;  border-radius: 5px;  color: white;  padding: 3px 8px;}

• 块级元素

如果需要居中的元素是块级元素（display:block），如div时，则可以设置margin-left和margin-right为auto。记得设置     元素的宽度，否则宽度自动为100%，从而不要居中。通常这样设置：

.center-me {
  margin: 0 auto;
}

记住通过设置float样式是不可能让元素居中的。

源码：

HTML

<main>  <div class="center">    I‘m a block level element and am centered.  </div></main>

CSS

.center {  margin: 0 auto;  width: 200px;  background: black;  padding: 20px;  color: white;}

• 多个块级元素

  如果需要水平居中的元素是多个块级元素（display:block）时，有两种办法可以实现。方法1：将需要居中的多个元素设置为内联块级（display:inline-block）元素，并设置最大宽度（max-width）。方法2：将父元素的display设置为flex，justify-centent设置为center。

源码：

HTML

<main class="inline-block-center">  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row. I have more content in me than my siblings do.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div></main>

<main class="flex-center">  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row. I have more content in me than my siblings do.  </div>  <div>    I‘m an element that is block-like with my siblings and we‘re centered in a row.  </div></main>

CSS

body {  background: #f06d06;  font-size: 80%;}

main {  background: white;  margin: 20px 0;  padding: 10px;}

main div {  background: black;  color: white;  padding: 15px;  max-width: 125px;  margin: 5px;}

.inline-block-center {  text-align: center;}.inline-block-center div {  display: inline-block;  text-align: left;}

.flex-center {  display: flex;  justify-content: center;}

垂直居中

内联级或类似内联级的元素

单行的内联元素

如果是单行的内联元素，可以通过设置内补丁padding的方式居中。如果由于某种原因不方便采用的话，还有一种小技巧可以达到效果，即将text的line-height等于height。

源码：

HTML

<main>  <a href="#0">We‘re</a>  <a href="#0">Centered</a>  <a href="#0">Bits of</a>  <a href="#0">Text</a></main>

CSS

body {  background: #f06d06;  font-size: 80%;}

main {  background: white;  margin: 20px 0;  padding: 50px;}

main a {  background: black;  color: white;  padding: 40px 30px;  text-decoration: none;}

多行内联元素

多行内联元素居中。可以使用table和cell元素，或者类似的技术。因为cell元素在table中默认垂直居中。

源码：

HTML

<table>  <tr>    <td>      I‘m vertically centered multiple lines of text in a real table cell.    </td>  </tr></table>

<div class="center-table">  <p>I‘m vertically centered multiple lines of text in a CSS-created table layout.</p></div>

CSS

body {  background: #f06d06;  font-size: 80%;}

table {  background: white;  width: 240px;  border-collapse: separate;  margin: 20px;  height: 250px;}

table td {  background: black;  color: white;  padding: 20px;  border: 10px solid white;  /* default is vertical-align: middle; */}

.center-table {  display: table;  height: 250px;  background: white;  width: 240px;  margin: 20px;}.center-table p {  display: table-cell;  margin: 0;  background: black;  color: white;  padding: 20px;  border: 10px solid white;  vertical-align: middle;}

或者使用flex。

源码：

HTML

body {  background: #f06d06;  font-size: 80%;}

table {  background: white;  width: 240px;  border-collapse: separate;  margin: 20px;  height: 250px;}

table td {  background: black;  color: white;  padding: 20px;  border: 10px solid white;  /* default is vertical-align: middle; */}

.center-table {  display: table;  height: 250px;  background: white;  width: 240px;  margin: 20px;}.center-table p {  display: table-cell;  margin: 0;  background: black;  color: white;  padding: 20px;  border: 10px solid white;  vertical-align: middle;}

CSS

body {  background: #f06d06;  font-size: 80%;}

div {  background: white;  width: 240px;  margin: 20px;}

.flex-center {  background: black;  color: white;  border: 10px solid white;  display: flex;  flex-direction: column;  justify-content: center;  height: 200px;  resize: vertical;  overflow: auto;}.flex-center p {  margin: 0;  padding: 20px;}

块级元素

如果知道父元素的高度，但是不知道要居中元素的高度，那么可以这样

.parent {
  position: relative;
  height:150px;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
 }

或这样

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直居中

使用transform:translate

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

使用flex

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

结论