版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30101879/article/details/78306979
第一种:普通流盒子居中;
通过设置上边框为透明色,进行高度及计算,后居中;
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
background: blue;
border-top: 1px solid transparent;
}
.big>div{
width: 200px;
height: 200px;
background: red;
margin: 25% auto;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
</div>
</body>
第二种:利用相对定位和绝对定位进行居中;
.big{
width: 400px;
height: 400px;
background: blue;
position: relative;
}
.big>div{
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
</div>
</body>
第三种方式:利用button做外容器,里边的块元素会自动垂直居中,只需要控制一下水平居中就可以达到效果;
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
background: blue;
}
.big>div{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<button class="big">
<div>列1</div>
</button>
</body>
第四种利用弹性盒子居中:CSS3中引入的新布局方式,比较好用。缺点:IE9以及IE9一下不兼容。
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
background: blue;
display: flex;
}
.big>div{
width: 200px;
height: 200px;
background: red;
margin: auto;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
</div>
第五种:利用transform居中;这种方法灵活运用CSS中transform属性,较为新奇。
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
background: blue;
}
.big>div{
width: 200px;
height: 200px;
background: red;
transform: translate(50%,50%);
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
</div>
第六种:利用table-cell居中方式
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
background: blue;
display: table-cell;
vertical-align: middle;
}
.big>div{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
</div>