以前总是被垂直居中的方法所困扰，今天来总结一下垂直居中的方法，增强记忆
div等块级元素居中
第一种方法，利用绝对定位居中（相对于父容器），就是要居中的元素相对父容器做一个绝对定位，要求块级元素的高度和宽度确定（水平居中则要求宽度确定），然后设置上下左右数值都为零，再设置外边距为自动就可以了，代码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>垂直居中测试</title> ???<style> ???????* { ???????????padding: 0; ???????????margin: 0; ???????} ???????body { ???????????position: absolute; ???????????left: 0; ???????????right: 0; ???????????top: 0; ???????????bottom: 0; ???????????margin: auto; ???????} ???????#myBox { ???????????width: 500px; ???????????border: 1px solid black; ???????????background: #eee; ???????????color: #333; ???????????text-align: center; ???????} ???????div { ???????????height: 500px; ???????????left: 0; ???????????right: 0; ???????????top: 0; ???????????bottom: 0; ???????????position: absolute; ???????????margin: auto; ???????} ???</style></head><body> ???<div id="myBox"> ???????我是测试 ???</div></body></html>实现的效果如下：
如果是只要求垂直居中，则div的宽度可以不确定，外边距的值设置成margin：auto 0；去掉div的right和left其他值不变，代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>垂直居中测试</title> ???<style> ???????* { ???????????padding: 0; ???????????margin: 0; ???????} ???????body { ???????????position: absolute; ???????????top: 0; ???????????bottom: 0; ???????????margin: 0 auto; ???????} ???????#myBox { ???????????width: 500px; ???????????border: 1px solid black; ???????????background: #eee; ???????????color: #333; ???????????text-align: center; ???????} ???????div { ???????????height: 500px; ???????????left: 0; ???????????right: 0; ???????????top: 0; ???????????bottom: 0; ???????????position: absolute; ???????????margin: auto; ???????} ???</style></head><body> ???<div id="myBox"> ???????我是测试 ???</div></body></html>效果如下：
在高度确定的情况下，还可以利用css3的flex属性处置居中。就是在需要居中的元素的父容器里面设置：display：flex;align-items: center;就可以了，如果还想水平居中加上justify-content：center;代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>垂直居中测试</title> ???<style> ???????* { ???????????padding: 0; ???????????margin: 0; ???????} ???????body { ???????????display: flex; ???????????position: absolute; ???????????left: 0; ???????????right: 0; ???????????bottom: 0; ???????????top: 0; ???????????margin: auto; ???????????border: 1px solid red; ???????????text-align: center; ???????????align-items: center; ???????????justify-content: center; ???????} ???????#myBox { ???????????width: 500px; ???????????border: 1px solid black; ???????????background: #eee; ???????????color: #333; ???????} ???????div { ???????????height: 500px; ???????} ???</style></head><body> ???<div id="myBox"> ???????我是测试 ???</div></body></html>效果如下：
这个方法是css3的新属性，如果要兼容不支持该属性的浏览器不要使用。
如果想做的div是个弹窗之类的东西，宽度高度都不确定，还要垂直水平居中，这个更简单，目前只发现一种办法，父容器设置display: flex;要居中的元素设置margin： auto；就行了，代码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>垂直居中测试</title> ???<style> ???????* { ???????????padding: 0; ???????????margin: 0; ???????} ???????body { ???????????display: flex; ???????????position: absolute; ???????????left: 0; ???????????right: 0; ???????????bottom: 0; ???????????top: 0; ???????????margin: auto; ???????????border: 1px solid red; ???????} ???????#myBox { ???????????display: inline-block; ???????????border: 1px solid black; ???????????background: #eee; ???????????color: #333; ???????????margin: auto; ???????} ???</style></head><body> ???<div id="myBox"> ???????<p>我是测试</p> ???????<p>我是测试</p> ???????<p>我是测试</p> ???????<p>我是测试</p> ???</div></body></html>效果如下：
这个方法也是仅适用支持css3的浏览器。
html标签的垂直居中方法总结
原文地址：https://www.cnblogs.com/zhangbob/p/9505060.html