标签：charset content webkit play blog htm 垂直 translate style
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ display: -webkit-flex; background-color: lightgreen; height: 100px; } .item{ color: #FFF; flex: 1; } .first{ width: 100px; background: red; } /*水平垂直居中 css*/ .myoff{ position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); background-color: royalblue; width: 300px; height: 300px; } /*水平垂直居中 flex版本*/ .parent{ display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } </style> </head> <body> <div class="nav" style="flex-direction: row-reverse;"> <div class="first">哈哈</div> <div class="item">adsfasdf</div> <div class="item" style="flex: 2;">大厦法定是adsfasdf</div> <div class="first">呵呵</div> </div> <!--<div class="myoff">asdf</div>--> <div class="parent"> <div style="width: 100px;height: 100px; background: red;">aaaaaaaaaaaa</div> </div> </body> </html>
标签：charset content webkit play blog htm 垂直 translate style
原文地址：http://www.cnblogs.com/xudy/p/6195812.html
