常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中，比较简单，可以设置text-align center，或者设置 margin-left:auto; margin-right:auto 之类的即可。

主要麻烦的地方还是在垂直居中的处理上，所以接下来主要考虑垂直方向上的居中实现。

水平垂直居中主要包括三类：基本文本类，图像类，其他元素类

但，也是由一些方法可以实现的，下面就来谈谈了解到的10中方法。

方法一、使用 line-height

这种方式更多地用在 单行文字的情况,其中使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了

<style type="text/css">  html,body,div {margin: 0;padding: 0}  .box {     margin: 20px auto;    width: 200px;    height: 200px;        background: #ddf;  }  .content {     line-height: 200px;    text-align: center;　　   overflow: hidden;  }</style><div class="box">  <div class="content">    This is text  </div></div>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：常见的几种 CSS 水平垂直居中解决办法

关键词：CSS