【学习笔记】块级元素水平垂直居中方法

最新推荐文章于 2021-06-25 17:33:27 发布

weixin_30678821

最新推荐文章于 2021-06-25 17:33:27 发布

阅读量541

点赞数

原文链接：http://www.cnblogs.com/lauzhishuai/p/10639886.html

版权

本文介绍了四种方法实现块级元素的水平垂直居中，包括使用绝对定位、CSS3的display:flex、transform属性和利用边距自动填充。详细解释了每种方法的工作原理，并提供了相应的代码示例。

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

本文以<div>元素为例

本文转载

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     width: 100%;
10     height: 450px;
11     position: relative;  
12 }