2种CSS居中布局实例

CSS是Web开发中不可或缺的一部分，随着Web技术的不断革新，CSS也变得更加强大。比如在Web布局中，现代CSS特性就可以更好的帮助我们快速实现如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等效果。CSS布局一直是CSS中非常重要的内容，本文我们就来介绍CSS布局中的2种CSS居中布局。

一、水平居中

1.先来看最常用的一种方法，利用margin属性设置外边距，当要居中当元素是display:block时可以用这种方法。

<div class="container">

    <div class="content"></div>

  </div>

  <style>

    .content {

      width: 200px;

      height: 200px;

      background-color: #000;

      margin: 0 auto;

    }

  </style>

2.使用text-align,将元素当成文字直接居中。当要居中元素是inline或者是inline-block时可以在元素的父容器上使用。

<div class="container">

    <span class="content">文字内容</span>

  </div>

  <style>

    .container {

      text-align: center;

    }

  </style>

<div class="container">

    <a href="#" class="content">链接</a>

    <a href="#" class="content">链接</a>

    <a href="#" class="content">链接</a>

  </div>

  <style>

    .container {

      text-align: center;

    }

    .content {

      display: inline-block;

    }

  </style>

3.利用定位来居中元素。绝对定位元素可以通过这种方式来居中,让定位的元素据左边50%父容器的距离，然后再让向左移动本身50%的距离。

<div class="container">

    <div class="content"></div>

  </div>

  <style>

    .container {

      position: relative;

    }

    .content {

      position: absolute;

      width: 200px;

      height: 200px;

      background-color: #000;

      left: 50%;

      transform: translateX(-50%);

    }

  </style>

4.使用flex布局来居中。  

 <div class="container">

    <div class="content"></div>

  </div>

  <style>

    .container {

      display: flex;

      justify-content: center;

    }

    .content {

      width: 200px;

      height: 200px;

      background-color: #000;

    }

  </style>

5.使用grid布局来居中，但是只为实现单个元素居中不推荐这种写法 

 <div class="container">

    <div></div>

    <div class="content"></div>

    <div></div>

  </div>

  <style>

    .container {

      display: grid;

      grid-template-columns: auto 200px auto;

      grid-template-rows: 200px;

    }

    

    .content {

      background-color: #f40;

    }

  </style>

6.使用grid布局的第二种居中方法，类似于flex

<div class="container">

    <div class="content"></div>

  </div>

  <style>

    .container {

      display: grid;

      justify-content: center;

      grid-template-columns: 200px;

      grid-template-rows: 200px;

    }

  </style>

二、垂直居中

1.利用定位来实现，和水平居中的原理一致  

<div class="container">

    <div class="content"></div>

  </div>

  <style>

    .container {

      height: 640px;

      background-color: gray;

      position: relative;

    }

    .content {

      position: absolute;

      top: 50%;

      transform: translateY(-50%);

      width: 200px;

      height: 200px;

      background-color: #fff;

    }

  </style>

2.同时利用定位和外边距实现，让子元素的top和bottom的值保持相同，然后设置margin: auto;

  <div class="container">

    <div class="content"></div>

  </div>

  <style>

    .container {

      height: 640px;

      background-color: gray;

      position: relative;

    }

    .content {

      width: 200px;

      height: 200px;

      background-color: #fff;

      position: absolute;

      top: 0;

      bottom: 0;

      margin: auto 0;

    }

  </style>

3.使用flex布局来进行垂直居中 

 <div class="container">

    <div class="content"></div>

  </div>

  <style>

    .container {

      height: 640px;

      background-color: gray;

      display: flex;

      flex-direction: column;

      justify-content: center;

    }

    

    .content {

      width: 200px;

      height: 200px;

      background-color: #fff;

    }

  </style>

4.使用grid布局来进行垂直居中  

<div class="container">

    <div class="content"></div>

  </div>

  <style>

    .container {

      height: 640px;

      background-color: gray;

      display: grid;

      grid-template-columns: 200px;

      grid-template-rows: 200px;

      align-content: center;

    }

    .content {

      width: 200px;

      height: 200px;

      background-color: #fff;

    }

  </style>

5.使用line-height对文字进行居中  

<div class="container">

    500

  </div>

  <style>

    .container {

      height: 640px;

      background-color: gray;

      line-height: 640px;

    }

  </style>

2种CSS居中布局就是以上的内容，针对CSS水平居中和垂直居中的布局，文中都给出了多种方法，我们可以根据实际情况采用最适合的方法来完成页面的CSS布局设计。在本站的CSS教程中，除了介绍CSS布局之外，对CSS控制页面的各种属性的方法都有详细的介绍，学习起来都很方便。