、已知子元素的高度和宽度，父元素相对定位，子元素绝对对定位。

 <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;
    }

完毕