css实现元素水平垂直居中常见的两种方式实例详解

一、父元素的flex布局实现元素的水平垂直居中

示例代码如下:




  
  
  
  Document
  


  

效果图如下:

css实现元素水平垂直居中常见的两种方式实例详解_第1张图片

二、绝对定位&负margin值实现元素水平垂直居中

注意:元素本身需要确定宽度和高度

示例代码如下:




  
  
  
  Document
  


  

效果图如下:

css实现元素水平垂直居中常见的两种方式实例详解_第2张图片

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

你可能感兴趣的:(css实现元素水平垂直居中常见的两种方式实例详解)