欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

盒子的水平居中

最编程 2024-02-13 08:15:26
...

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

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

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

这种方法的优点是简单直观，主要是利用了定位，元素定位之后，再使用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>

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

上一篇： 如何在HTML中实现元素的水平和垂直居中布局?

下一篇： 7个方法让你轻松掌握CSS中的盒子居中对齐技巧

推荐阅读