响应式设计中实现居中布局的技巧

在响应式设计中，实现居中布局是非常常见的需求。无论是居中一个元素还是一个容器，都需要使用到一些技巧来实现。

水平居中

使用 text-align 属性

将要居中的元素的父元素设置为 text-align: center; 即可实现水平居中。例如：

// www.javascriptcn.com code example
<style>
  .container {
    text-align: center;
  }
  .element {
    display: inline-block;
  }
</style>

<div class="container">
  <div class="element">要居中的元素</div>
</div>

使用 flexbox

使用 flexbox 布局可以轻松实现水平居中。将要居中的元素的父元素设置为 display: flex; justify-content: center;，并将要居中的元素设置为 align-self: center;。例如：

// www.javascriptcn.com code example
<style>
  .container {
    display: flex;
    justify-content: center;
  }
  .element {
    align-self: center;
  }
</style>

<div class="container">
  <div class="element">要居中的元素</div>
</div>

垂直居中

使用 table-cell

使用 table-cell 布局可以实现垂直居中。将要居中的元素的父元素设置为 display: table-cell; vertical-align: middle;，并设置父元素的宽度和高度。例如：

// www.javascriptcn.com code example
<style>
  .container {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    height: 200px;
  }
  .element {
    margin: 0 auto;
  }
</style>

<div class="container">
  <div class="element">要居中的元素</div>
</div>

使用 flexbox

同样是使用 flexbox 布局，将要居中的元素的父元素设置为 display: flex; align-items: center;，并将要居中的元素设置为 margin: auto;。例如：

// www.javascriptcn.com code example
<style>
  .container {
    display: flex;
    align-items: center;
    height: 200px;
  }
  .element {
    margin: auto;
  }
</style>

<div class="container">
  <div class="element">要居中的元素</div>
</div>

水平垂直居中

使用绝对定位

将要居中的元素设置为 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 可以实现水平垂直居中。例如：

// www.javascriptcn.com code example
<style>
  .container {
    position: relative;
    width: 300px;
    height: 200px;
  }
  .element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="container">
  <div class="element">要居中的元素</div>
</div>

使用 grid

使用 grid 布局可以轻松实现水平垂直居中。将要居中的元素的父元素设置为 display: grid; place-items: center;。例如：

// www.javascriptcn.com code example
<style>
  .container {
    display: grid;
    place-items: center;
    width: 300px;
    height: 200px;
  }
  .element { }
</style>

<div class="container">
  <div class="element">要居中的元素</div>
</div>

结语

以上就是实现响应式设计中居中布局的各种技巧。无论是水平居中还是垂直居中，还是水平垂直居中，根据不同的实现方式选择合适的方法即可。希望这篇文章对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d80ae3a941bf7134e5f623