HTML:
Css:
.my_nav { width: 100%; border: 1px solid #e0e0e0; border-width: 1px 0; background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } .my_nav ul { display: box; display: -ms-box; display: -webkit-box; display: flex; display: -ms-flexbox; display: -webkit-flex; overflow: hidden; } .my_nav li.cur { background-color: #E5E5E5; } .my_nav li:first-child { border-left: 0; } .my_nav li { display: block; flex: 1; -ms-flex: 1; -webkit-flex: 1; box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; width: 100px; text-align: center; font-size: 12px; line-height: 36px; border-left: 1px solid #e0e0e0; padding: 0px; background-color: #f3f3f3; } .my_nav a { display: block; min-height: 36px; } a { border-bottom-color: #cccccc; border-bottom-style: none; COLOR: #888888; text-decoration: none; font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif; outline: none; } 
等分居中 flex等分
- 手机
- 联系人
- 信息
- 主屏
- 手机
- 联系人
- 信息
table等分
- 手机
- 联系人
- 信息
- 主屏
- 手机
- 联系人
- 信息
flex居中
子元素水平垂直居中
translate居中
子元素水平垂直居中
两端对齐
左边对齐
右边对齐
原文地址：http://www.cnblogs.com/xinlinux/p/4463608.html