块级元素水平垂直居中方法

最新推荐文章于 2024-08-20 10:18:36 发布

情绪化怪物

最新推荐文章于 2024-08-20 10:18:36 发布

阅读量3.1k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_72686942/article/details/126105228

版权

本文介绍了四种方法实现块级元素的水平垂直居中：1) 使用绝对定位和外边距；2) 利用CSS3的flex布局；3) 结合绝对定位与transform；4) 设置绝对定位及四边偏移。每种方法都有对应的效果图和代码示例。

摘要由CSDN通过智能技术生成

1.已知块级元素的宽和高，使用绝对定位absolute和外边距实现水平垂直居中。

父元素position:relative，子元素position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2;

（思想：先把块级元素中的左上角定位到父元素的中心，然后再向上向左偏移本身的一半，就达到了是本身的中心居中的目的）

效果图如下：

代码：

 1 <div class="box">
 2     <div class="center-box1">
 3         <p>【第一种方法】知道长和宽，使用绝对定位+外边距设定水平垂直居中</p>
 4     </div>
 5 </div>
 6 
 7 .box {
 8     background: #6c94be;
 9      100%;
10     height: 450px;
11     position: relative;  
12 }
13 .center-box1 {
14     position: absolute;
15     top: 50%;
16     left: 50%;
17     margin-top: -100px;
18     margin-left: -100px;
19      200px;
20     height: 200px;
21     background: #5B83AD;
22 }

2.使用cs