html+css是前端的基础技能，这个也是纯前端开发人员和后端转前端的开发人员的最大差别。元素居中在不同的业务场景要求下，有不同的适应技术方案。下面，就是一些常见的元素居中方案（纯css，不借助js），希望对你有帮助。
-
父元素宽高已知
- 单行文本水平垂直居中
父元素上设置样式： text-align: center; line-height: 父元素高度; - 子元素为非块级元素水平居中
父元素： text-align: center;- 子元素为非块级元素水平、垂直居中（包含多行文本）
- ie9+
.parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }- 不能用css3
- 子元素宽高已知
.parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; margin-left: -子元素宽/2; margin-top: -子元素高度/2;
- 子元素宽高已知
- 子元素宽高未知 ``` 子元素宽高未知且需要兼容ie8这种情况比较复杂，下面的方案可以解决，需要我们在子元素和父元素之间再多包一层： html: <div class="parent"> <div class="child-wrap"> <div class="child-content"> 这是子元素<br /> 这是子元素 </div> </div> </div> css: .parent{ height: 100px; } .child-wrap{ line-height: 100px; } .child-content{ display: inline-block; line-height: normal; vertical-align: middle; } ```
- 单行文本水平垂直居中
父元素未知宽高
通过设置padding: 上 右 下 左;一般可以达到我们的需要，最多再加上text-align: center;
