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全栈：

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

. 元素高度声明的情况下在父容器中居中：绝对居中法

<div class="parent">
 <div class="absolute-center"></div>
</div>
.parent {
 position: relative;
}
.absolute-center {
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 height: 70%;
 width: 70%;
}
优点：
1.跨浏览器，包括 IE8-10
2.无需其他冗余标记，CSS 代码量少
3.完美支持图片居中
4.宽度高度可变，可用百分比
缺点：
1.必须声明高度

2. 负外边距：当元素宽度高度为固定值时。设置 margin-top/margin-left 为宽度高度一 半的相反数，top:50%;left:50%

<div class="parent">
 <div class="negative-margin-center"></div>
</div>
.parent {
 position: relative;
}
.negative-margin-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -150px;
 height: 300px;
 width: 300px;
}
优点：
良好的跨浏览器特性，兼容 IE6-7
代码量少
缺点：
不能自适应，不支持百分比尺寸和 min-/max-属性设置
内容可能溢出容器
边距大小域与 padding，box-sizing 有关

3. CSS3 Transform 居中：

<div class="parent">
 <div class="transform-center"></div>
</div>
.parent {
 position: relative;
}
.transform-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: auto;
 width: 50%;
 -webkit-transform: translate(-50%， -50%);
 -moz-transform: translate(-50%， -50%);
 transform: translate(-50%, -50%);
}
优点：
内容高度可变
代码量少
缺点：
IE8 不支持
属性需要浏览器厂商前缀
可能干扰其他 transform 效果

4. table-cell 居中：