、已知子元素的高度和寬度，父元素相對定位，子元素絕對對定位。

 <div class="parent">
            <div class="child">子元素</div>
  </div>

.parent {
     border: 1px solid #888;
     width: 300px;
     height: 300px;
     padding: 20px;
     position: relative;
}
.child {
      background-color: #f40;
      width: 150px;
      height: 150px;
      position: absolute;
      left: calc(50% - 75px);
      top: calc(50% - 75px);
}

2、子元素的高度和寬度不知，父元素相對定位，子元素絕對定位，然后利用CSS3的transform屬性。

.parent {
     border: 1px solid #888;
     width: 300px;
     height: 300px;
     padding: 20px;
     position: relative;
}
.child {
      background-color: #f40;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
  		left: 50%;
      top: 50%;
}

3、子元素的高度和寬度不知，利用flex布局。

ul li 橫排居中排列的方法

無序列表的列表項默認情況下是豎著排的，因為li元素是塊級元素，會自動分行。那如果要將列表的列表項進行橫排，比用無序列表ul元素定義一個導航條。那該怎么辦呢？這當中有三個應當被解決的東西，一個是橫排本身，另一個就是應當把無序列表項的圓點去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：

ul li橫排的方法

將ul無序列表元素中的列表項li元素的display屬性設置成inline或inline-block，個人比較常用的是后者：

ul li{display:inline-block;}

ul水平居中和垂直居中的方法

水平居中方法：只要將ul元素包含于一個div元素，并將div元素的text-align屬性設置為center即可將ul水平居中。除此之外，因為ul的列表默認情況下是有左內邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內邊距padding-left設置為0，具體可見下方的綜合實例。

垂直居中方法：為包含ul元素的div元素設置寬度width和高度height（實際上導航條一般也需要有寬度和高度的設置），然后將ul的line-height屬性設置為父元素的高度height即可。

去掉圓點的方法

將ul元素的list-style屬性設置為none即可。

ul li 橫排居中排列綜合實例代碼，及在線編輯器

<div class='e1'>
  <ul class='e2'>
    <li>HTML</li>
    <li>python</li>
    <li>golang</li>
  </ul>
</div>

<style>
  .e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
  .e2{list-style:none;padding-left:0%;}
  .e2 li{line-height:50px;display:inline-block;}
</style>

HTML+CSS+JS實例在線編輯器：

HTML ul li 橫排居中排列的方法，綜合實例在線 - HTML教程

實例代碼解析

如上代碼，一定要將ul的左內邊距padding-left設置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運行看一看效果。

python全棧：

笨鳥工具-璞玉天成，大器晚成

前端開發中，通過CSS實現布局容器的居中，也有諸多方法方式，當然也是CSS面試題中的經典面試題，在本文章中會系統的分析綜述 通過 Flexbox 布局模塊 與 CSS Grid布局模 實現容器的居中效果。

在傳統解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性來實現基本布局，包括本文章的居中排列。

1 Flexbox中實現水平垂直居中

1.1 Flexible Box 的簡述

在2009年，W3C提出出的 Flex 布局方案，Flex是Flexible Box的縮寫，可意為”彈性布局”，任何一個容器都可以指定為Flex布局，可用來為盒狀模型提供最大的靈活性。

采用Flex布局的元素，稱為Flex容器（flex container），以下稱為 Flexbox ，Flex容器中的所有子元素稱為Flex項目（flex item）。

任何一個容器都可以指定為Flex布局，如下所示：

.box{
  display: flex;
}

或者是

.box{
  display: inline-flex;
}

可點擊這里查看 CSS中flex和inline-flex的區別

Flexbox 默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end，如下圖所示：

1.2 Flexible Box 中子 Item的居中對齊

在Flexbox布局模塊中，使其子 Item (flex item) 居中對齊（水平方向與豎直方向全部居中），如下圖 1-1 所示效果：

1.2.1 實現方式一 只設置 Flex容器的屬性

如圖 1-1 中所示的效果，只需要在Flex容器上設置justify-content、align-items的值為center時，可以讓元素在Flex容器中達到水平垂直居中的效果，如下代碼清單1-2所示：

/*代碼清單1-2*/
<div class="flex__container">
  <div class="flex__item"></div>
</div>

    /*Flex 容器*/
    .flex__container {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 300px;
      height: 300px;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 100px;
      height: 100px;
      background-color: aqua;
    }

justify-content 用來設置水平居中，如下圖1-3所示：

align-items 用來限制豎直居中，如下圖1-4所示：

如下圖1-2中所示，將Flex容器中的子Item增加為 4 個，此種方法設置的居中效果依然有效果。

圖 1-2 中對應的 代碼如下：

/*代碼清單1-3*/
<div class="flex__container">
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

    /*Flex 容器*/
    .flex__container {
      display: flex;
      justify-content: center;
      align-items: center;

      /*flex-direction: column;*/
      /*display: inline-flex;*/

      width: 300px;
      height: 300px;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 50px;
      height: 50px;
      margin-left: 10px;
      margin-top: 10px;
      background-color: aqua;
    }

1.2.2 實現方式 二 同時設置 Flex容器屬性與其子Item的屬性

    /*Flex 容器*/
    .flex__container {
      display: flex;
      justify-content: center;
    }

    /*Flex 子 Item */
    .flex__item {
      align-self: center;
    }

對應的 Html 層級代碼如下：

<div class="flex__container">
  
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  
</div>

1.2.3 Flex容器中的 Item 設置margin: auto

如果在Flex容器中只有一個 子 Item ，可以在 Item中顯式的設置margin的值為auto，也可以實現水平垂直居中效果，如下圖1-5所示：

2 Grid 布局中實現水平垂直居中

Css 中的 Grid 布局可稱為 CSS Grid Layout Module ，是CSS為布局新增的一個模塊，簡單的理解為 Grid 布局，是一個網絡布局，任何一個容器都可以指定為 Grid 布局，如下所示：

.box{
 /*或者 inline-grid */
  display: grid;
}

在 Grid 布局中，實現其子 Item的垂直水平居中效果可直接 配置 place-items 為 center ，如下圖 1-6所示：

    /*Grid 容器*/
    .flex__container {
      /*或者 inline-grid */
      display: grid;
      place-items: center;
    }

完畢