html5 - html怎么让div居中啊？？
本文介绍了html5 - html怎么让div居中啊？？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<body>
<h1 align="center">what the fuck</h1>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="Upload File" style="width:400px;padding:30px 70px 50px 70px;margin: 0 auto;" align="center">
<div style="margin-bottom:20px">
<div>File1:</div>
<input class="easyui-filebox" name="file1" data-options="prompt:'Choose a file...'" style="width:100%">
</div>
<div>
<a href="#" class="easyui-linkbutton" style="width:100%">Upload</a>
</div>
</div>
</body>如图，无法居中。前端真麻烦，居中都没号东西用
解决方案
没看你代码哈。
不过让快元素居中，有多种方式:
1: display:inline-block
<style>
.total{width:1000px;height:auto;border:1px solid #ccc;text-align:center;}
.center{width:200px;height:50px;background-color:blue;display:inline-block;}</style>
<div class='total'>
<div class='center'></div></div>
2: 未知宽高：position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
<style>
.total{width:1000px;height:auto;border:1px solid #ccc;}
.center{width:200px;height:50px;background-color:blue;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}</style>
<div class='total'>
<div class='center'></div></div>
2: 已知宽高：width:200px;height:200px;position:absolute;left:50%;top:50%;transform:translate(-100px,-100px);
<style>
.total{width:1000px;height:auto;border:1px solid #ccc;}
.center{width:200px;height:50px;background-color:blue;position:absolute;left:50%;top:50%;transform:translate(-100px,-100px)}</style>
<div class='total'>
<div class='center'></div></div>
以上代码未经测试，若有问题再问哈
这篇关于html5 - html怎么让div居中啊？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
