<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul,li{ list-style: none; } .demo { line-height: 44px; margin-bottom: 20px; text-align: center; background-color: #0078e7; color: #fff; } .flex-equal, .flex-center, .justify { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex-center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .demo-center .children { background: #0078e7; color: #fff; width: 150px; line-height: 5; text-align: center; } .demo-center { border: 1px solid #ccc; margin: 20px; height: 200px; } .translate-center { position: relative; } .demo-center .children { background: #0078e7; color: #fff; width: 150px; line-height: 5; text-align: center; } .translate-center .children { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .table-equal { display: table; table-layout: fixed; width: 100%; } .table-equal li { display: table-cell; } .flex-equal li { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; } /*tablecell居中*/ #vc{ display:table; background-color:#000; width:1200px; height:1000px; overflow:hidden; margin-left:50px; _position:relative; } #vci { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; } #content { color:#fff; border:1px solid #fff; display:inline-block; _position:relative; _top:-50%; _left:-50%; } </style> </head> <body> <h2>flex居中</h2> <div class="flex-center demo-center" > <div class="children">子元素水平垂直居中</div> </div> <h2>translate居中</h2> <div class="translate-center demo-center"> <div class="children">子元素水平垂直居中子元素水平垂直居中</div> </div> <!-- 等分 --> <ul class="table-equal demo"> <li>手机</li> <li>联系人</li> <li>信息</li> </ul> <ul class="flex-equal demo"> <li>手机</li> <li>联系人</li> <li>信息</li> </ul> <!-- tabcell居中 --> <div id='vc'> <div id='vci'> <div id='content'> 我们垂直居中了，我们水平居中了,真的是可以居中的吗，<br /> 你信不信我反正是新了<br /> <br /> 美浩工作室是一个90后团队，网站建设设计为一体的一个<br /> 年轻化互联网团队！ </div> </div> </div> </body> </html>