1.父层：改变display为inline类型（设置为 行内元素 显示），然后子层：使用text_align:center来实现居中。
存在问题：将块元素的display设置为inline类型，少了一些功能，比如：设定长度值。
<head>
<title> new document </title>
<style>
.div1{
text-align:center;
}
.div1 ul{
display:inline;
}
.div1 li{
display:inline;
}
</style>
</head>
<body>
<div class="div1">
<ul>
<li><a href="#">x1</a></li>
<li><a href="#">x2</a></li>
<li><a href="#">x3</a></li>
</ul>
</div>
</body>
2.块级元素水平居中不能使用text-align:center，一种常用的做法，详见：
https://blog.csdn.net/gbxiaohuozi/article/details/51400356
===================================================================================================================================
慕课网上的方法如下：
（1）加入table标签
<div>将我所在的div水平居中 </div>
加入table标签后：
<table> <tbody> <tr><td> <div>将我所在的div水平居中 </div> </td></tr> </tbody> </table>
（2）设置为内联元素通过父类来修改（在初始代码中添加类来实现居中）
<div class="div1">将我所在div容器水平居中 </div> <!--CSS样式如下--!> <style> .div1{ text-align:center; } </style>
（3）通过给父类元素设置为float，left:50%，position:relative；子类元素设置left:-50，position:relative。将ul层的最左端与原div中线对其，再将子类li层的中线移动到ul层中线处，从而实现li层居中。
<style>
.container{
float:left;
border:2px red solid;
position:relative;
left:50%;
}
.container ul{
list-style:none;
border:2px blue solid;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{
display:inline;
margin-right:8px;
border:2px green solid;
}
</style>
注：display:inline，允许它的前后存在其它的内联元素同行显示。详见：https://blog.csdn.net/molu_chase/article/details/52175985
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
