常用的8种实现div盒子居中的方法
常用的8种实现盒子居中的方法
·
1、利用margin和overflow结合
<style>
.bigbox{
width: 500px;
height: 500px;
background-color: pink;
overflow: hidden;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
margin: 0 auto;
margin-top: 175px;
}
</style>
</head>
<body>
<!-- 1、利用margin和overflow结合 -->
<div class="bigbox"><div class="box"></div></div>
</body>2、利用定位和margin结合 使用条件：知道自身宽高
<style>
.bigbox{
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
text-align: center;
line-height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="bigbox"><div class="box">居中</div></div>
</body>3、absolute + margin auto 这种方式通过设置各个方向的距离都是 0，此时再讲 margin 设为 auto，就可以在各个方向上居中了。
使用条件：子元素固定宽高
<style>
.bigbox{
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
line-height: 100px;
position: absolute;
/* 这五条很重要 */
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="bigbox"><div class="box">居中</div></div>
</body>4、absolute+transform
使用条件：在不知道子元素自身的宽高下
<style>
.bigbox {
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
line-height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="bigbox">
<div class="box">居中</div>
</div>
</body>5、 lineheight
把 box 设置为行内元素，通过 text-align 就可以做到水平居中，
vertical-align 也可以在垂直方向做到居中,子元素中将文字显示重置为想要的效果
vertical-align 属性设置元素的垂直对齐方式 , middle把此元素放置在父元素的中部。
使用条件：要求子元素固定宽高
<style>
.bigbox{
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
line-height: 500px;
text-align: center;
/* font-size: 0px; */
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
/* font-size: 16px; */
display: inline-block;
vertical-align: middle;
line-height: 100px;
/* text-align: center; */
}
</style>
</head>
<body>
<div class="bigbox"><div class="box">居中</div></div>
</body>6、table
tabel 单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了
让行内元素水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。
<style>
.bigbox{
width: 500px;
height: 500px;
background-color: pink;
text-align: center;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
line-height: 100px;
display: inline-block;
}
/* 让大盒子居中 */
table {
margin: 0 auto;
}
</style>
</head>
<body>
<table>
<tr>
<td class="bigbox"><div class="box">居中</div></td>
</tr>
</table>7、利用弹性盒子和 justify-content: center;align-items: center 结合使用
<style>
.bigbox{
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<!-- 利用弹性盒子和 justify-content: center;
align-items: center 结合使用-->
<div class="bigbox"><div class="box">居中</div></div>
</body>8、paddding+top等于bottom 、利用相等的顶部内边距和底部内边距填充将子分区置于父分区的中心。
<style>
.bigbox{
width: 500px;
/* height: 500px; */
background-color: pink;
margin: 0 auto;
padding: 9% 0;
box-sizing:content-box;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
line-height: 100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="box"></div>
</div>
</body>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)