css不定宽度元素水平居中代码实例
分类：实例代码
本章节分享一段代码实例，它实现了不定宽度元素水平居中效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.a1 {
width: 500px;
height: 80px;
margin: 20px auto;
border: 1px solid red;
}
ul, li {
list-style: none;
}
ul.b1 {
display: table;
margin: 0 auto;
}
ul.b1 li {
width: 50px;
height: 50px;
border: 1px solid #ccc;
float: left;
}
.a2 {
width: 500px;
height: 80px;
margin: 20px auto;
border: 1px solid red;
}
ul.b2 {
float: left;
position: relative;
left: 50%;
}
ul.b2 li {
width: 50px;
height: 50px;
border: 1px solid #ccc;
float: left;
position: relative;
left: -60%;
}
</style>
</head>
<body>
<div class="a1">
<ul class="b1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="a2">
<ul class="b2">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu