首先需要声明,一个“原生态”的块级元素其实是无法居中的,因为其宽度默认是100%,但是在设计时,常需要设置一个块级元素居中。例如div,h1等元素。
有若干方法可以实现这个目的:
方法一:将其父级元素的text-align属性设置为center,将其自身display属性设置为inline-block。若要父级元素的text-align属性起作用,必须要带有行内元素的特性。
方法二:在块级元素的外面再套一个div
<style type="text/css">
.con {
position: relative;
float: left;
left: 50%;
background: lightblue;
}
.box {
position: relative;
float: left;
left: -50%;
width: 100px;
height: 100px;
background: lightcoral;
}
</style>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>