父元素为一个div，宽度高度不固定，子元素是一个块状元素，宽高已知，如何实现子元素在父元素内水平、垂直居中？

父元素为一个div，宽度高度不固定，子元素是一个块状元素，宽高已知，如何实现子元素在父元素内水平、垂直居中？

 1、
//利用相对定位，让子元素垂直居中

#mydiv

{

       height: 600px;

       border: 1px solid red;

}

#myChild

{

       background-color: blue;

       height: 150px;

       width: 150px;

       margin:0 auto;

       position: relative;

       top: 50%;

       margin-top: -75px;  //两者选其一

      transform:translateY(-75px);

}

2、//利用Flex(弹性布局)让子元素居中

#mydiv

{
height: 600px;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;

}

#myChild

{
background-color: blue;
height: 150px;
width: 150px;
margin:0 auto;

}

 

以上两(三)种方法是常见的水平垂直居中的。其中Flex是当下使用的比较多的一种布局方式。