元素垂直水平居中的三种方法

是阿丹啊

已于 2023-05-04 19:07:30 修改

阅读量1.4k

点赞数

分类专栏： CSS html 文章标签：前端 html css

于 2023-04-06 23:41:56 首次发布

本文链接：https://blog.csdn.net/qq_61214252/article/details/130001522

版权

CSS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

方法一：利用绝对定位

使用条件：

（1）、明确宽高的子元素；

（2）、使用绝对定位，且四个方向的数值都为1；

（3）、子元素可以使用margin:auto;就实现在父元素中的水平垂直方向居中。

position:absolute;

top:0;

button:0;

left:0;

right:0;

margin:auto;

方法二：利用弹性布局

利用弹性布局给该元素的父元素设置：

Box{

        display:flex;

        flex-deriction:row/column;

        justify-content:center;

        align-item:center;

}

方法三：利用position和transform实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent{
width: 100%;
height: 400px;
position: relative;
background: green;
}
.child{
position: absolute;
width: 200px;
height: 200px;
background: blue;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);//表示的是将当前宽度/2，高度/2，反向移动，第一个是左右，第二个是上下移动，-50%表示左移动200px/2 = 100px,如果是正50%，就是向右移动100px,第二个同理。
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>