CSS是Web開發(fā)中不可或缺的一部分，隨著Web技術(shù)的不斷革新，CSS也變得更加強大。比如在Web布局中，現(xiàn)代CSS特性就可以更好的幫助我們快速實現(xiàn)如等高布局，水平垂直居中，經(jīng)典的圣杯布局、寬高比例、頁腳保持在底部等效果。CSS布局一直是CSS中非常重要的內(nèi)容，本文我們就來介紹CSS布局中的2種CSS居中布局。

一、水平居中

1.先來看最常用的一種方法，利用margin屬性設(shè)置外邊距，當要居中當元素是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">文字內(nèi)容</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.利用定位來居中元素。絕對定位元素可以通過這種方式來居中,讓定位的元素據(jù)左邊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布局來居中，但是只為實現(xiàn)單個元素居中不推薦這種寫法 

?<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.利用定位來實現(xiàn)，和水平居中的原理一致  

<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.同時利用定位和外邊距實現(xiàn)，讓子元素的top和bottom的值保持相同，然后設(shè)置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居中布局就是以上的內(nèi)容，針對CSS水平居中和垂直居中的布局，文中都給出了多種方法，我們可以根據(jù)實際情況采用最適合的方法來完成頁面的CSS布局設(shè)計。在本站的CSS教程中，除了介紹CSS布局之外，對CSS控制頁面的各種屬性的方法都有詳細的介紹，學(xué)習(xí)起來都很方便。