如何使一个盒子水平垂直居中

最新推荐文章于 2024-07-16 08:30:00 发布

101茂茂

最新推荐文章于 2024-07-16 08:30:00 发布

阅读量814

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/weixin_64691270/article/details/123657338

版权

在日常的网页开发过程中，我们经常需要让一个盒子在另外一个盒子中水平垂直居中对齐，下面我介绍一下常见的可行方法

方法一：利用定位（常用方法,推荐）

这种方法的优点是简单直观，主要是利用了定位，元素定位之后，再使用margin样式将元素根据自身的宽高值的一半进行偏移调整，让其实现居中

缺点也很明显，我们得知道子元素的宽高，如果我们不能确定子元素的宽高，那么这个方法并不很适合哦

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent { 
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position: relative;
    }
.child { 
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px; margin-left: -50px;
}
</style>
</head>
<body>
<div class="parent">
	<div class="child">我是子元素</div>
</div>
</body>
</html>

方法二：利用 margin:auto

这个方法主要利用了定位的另外一个特性，通过设置四个方向上的值，让元素自动的计算出与四个方向上的距离

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent { 
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position: relative;
}
.child { 
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    position: absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
</head>
<body>
<div class="parent">
	<div class="child">我是子元素</div>
</div>
</body>
</html>

方法三：利用 display:table-cell

这个方法是修改了元素本身的块级属性，让其能够支持垂直对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent { 
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child { 
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
	<div class="child">我是子元素</div>
</div>
</body>
</html>

方法四：利用 display：flex;设置垂直水平都居中

这个方法重要利用了伸缩布局的属性，这也是开发中常用的方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent { 
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    }
.child { 
    width: 100px;
    height: 100px;
	border: 1px solid #999;
}
</style>
</head>
<body>
	<div class="parent">
		<div class="child">我是子元素</div>
	</div>
</body>
</html>

方法五：利用 transform

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent { 
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position: relative;
}
.child { 
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>
	<div class="parent">
		<div class="child">我是子元素</div>
	</div>
</body>
</html>

总结：以上方法都可以，根据需要进行使用

101茂茂

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何使一个盒子水平垂直居中

在日常的网页开发过程中，我们经常需要让一个盒子在另外一个盒子中水平垂直居中对齐，下面我介绍一下常见的可行方法方法一：利用定位（常用方法,推荐）这种方法的优点是简单直观，主要是利用了定位，元素定位之后，再使用margin样式将元素根据自身的宽高值的一半进行偏移调整，让其实现居中缺点也很明显，我们得知道子元素的宽高，如果我们不能确定子元素的宽高，那么这个方法并不很适合哦<!DOCTYPE html><html lang="en"><head>&lt
复制链接

扫一扫