最近在总结前端知识，也参加了一些面试，面试中遇到一道题要求垂直水平居，现在对这进行一下总结，也好巩固一下知识。
方案一、flex布局
.layout.flex{ ???????????display: flex; ???????????width:100%; ???????????align-items: center; ???/*在交叉轴上如何对齐*/ ???????????justify-content: center; ????/*在主轴上如何对齐*/ ???????????height: 300px; ???????????border: 1px solid #000000; ???????}<section class="layout flex"> ???<h1>flex布局水平垂直居中方案</h1></section>方案二、margin：auto
#content{ ???????????position: absolute; ???????????margin: auto; ???????????top:0; ???????????bottom: 0; ???????????left: 0; ???????????right: 0; ???????????width: 300px; ???????????height: 100px; ???????????border: 1px solid blue; ???????????/*将section中的文字也水平垂直居中*/ ???????????text-align: center; ???????????line-height: 100px; ???????} ???</style> <section id="content"> ???????水平垂直居中--margin:auto ???</section>这里的section设置任意的高度和宽度都可以实现水平垂直居中的效果。
方案三、transform
#content{ ???????????position: absolute; ???????????top:50%; ???????????left: 50%; ???????????height: 100px; ???????????width: 500px; ???????????border: 1px solid blue; ???????????transform: translate(-50%, -50%); ???????} <section id="content"> ???????垂直水平居中--translate ???</section>使用transform方式可居中任意宽高的元素，缺点是transform只有IE10+以及其他现代浏览器才支持,存在兼容性问题。
方案四、表格布局
?.container{ ???????????width: 60%; ???????????height: 300px; ???????????border: 1px #000000; ???????????display: table; ???????} ???????.cell{ ???????????display: table-cell; ???????????text-align: center; ???????????vertical-align: middle; ???????????border: 1px solid blue; ???????}<section class="container"> ???????<div class="cell">水平垂直居中--table</div> ???</section>表格布局方式兼容性较好
css布局--垂直水平居中
原文地址：https://www.cnblogs.com/jingmi-coding/p/9218863.html