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

本文以<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 }