css内容居中
方法一:
父级:text-alien:center;
子集:display:inline-block;
css <style> .father{ text-align: center; /*position: relative; float: left; left: 50%;*/ } .father>div{ background-color: pink; margin-top: 10px; height: 100px; width: 200px; } .center{ display: inline-block; } </style> html <div class="father"> <div class="center">hello</div> </div>
方法二:
子集:margin:0 auto;
<style> .father{ /*text-align: center;*/ /*position: relative; float: left; left: 50%;*/ } .father>div{ background-color: pink; margin-top: 10px; height: 100px; width: 200px; } .center{ /*display: inline-block;*/ margin: 0 auto; } </style> <div class="father"> <div class="center">hello</div> </div>
方法三:
集合float、position来完成
<style> .father{ position: relative; float: left; left: 50%; } .father>div{ background-color: pink; margin-top: 10px; height: 100px; width: 200px; } .center{ position: relative; float: left; left: -50%; } </style> <div class="father"> <div class="center">hello</div> </div>
方法四:
用transform(css3)、position完成
<style> .father{ position: relative; background: yellow; left: 50%; } .father>div{ background-color: pink; margin-top: 10px; height: 100px; width: 200px; } .center{ position: absolute; transform: translate(-50%, 0); } </style> <div class="father"> <div class="center">hello</div> </div>