使DIV水平和垂直居中的最简单方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使DIV水平和垂直居中的最简单方法相关的知识，希望对你有一定的参考价值。

  1. /* CSS Document */
  2. .centered_div {
  3. width: 100px;
  4. height: 100px;
  5. position: absolute;
  6. top: 50%;
  7. left: 50%;
  8. margin-left: -50px;
  9. margin-top: -50px;
  10. background: red;
  11. }
  12.  
  13. Here is another example with size 500 x 200 px.
  14.  
  15. /* CSS Document */
  16. .centered_div {
  17. width:500px;
  18. height: 200px;
  19. position: absolute;
  20. top: 50%;
  21. left: 50%;
  22. margin-left: -250px;
  23. margin-top: -100px;
  24. background: red;
  25. }

以上是关于使DIV水平和垂直居中的最简单方法的主要内容，如果未能解决你的问题，请参考以下文章

如何使文字在div中水平和垂直居中的css代码

简单易实现的水平居中垂直居中方法

怎么让一个不定宽高的div水平居中，垂直水平居中

如何让DIV水平和垂直居中

div水平垂直居中的几种方法

垂直和水平居中方法小结