居中（整理）

来源：互联网发布：汤臣倍健鱼油知乎编辑：程序博客网时间：2024/05/29 13:48

一、在一个div里的div左右垂直居中

条件1：已知box1，box2宽高

条件2：已知box1宽高，box2宽高未知（即box2宽高是可变的）

<div class="box1"><div class="box2"></div></div>

通用method1：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box1{width: 500px;height: 500px;border: 1px solid red;text-align: center;}.box2{width: 200px;height: 200px;border:1px solid green;display:inline-block;vertical-align: middle;}span{width: 0;height: 100%;display: inline-block;vertical-align: middle;}</style></head><body><div class="box1"><div class="box2"></div><span></span></div></body></html>

通用method2：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box1{width: 500px;height: 500px;border: 1px solid red;display: table-cell;vertical-align: middle;}.box2{width: 200px;height: 200px;border:1px solid green;margin: 0 auto;}</style></head><body><div class="box1"><div class="box2"></div></div></body></html>

通用method3：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box1{width: 500px;height: 500px;border: 1px solid red;position: relative;}.box2{width: 200px;height: 200px;border:1px solid green;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}</style></head><body><div class="box1"><div class="box2"></div></div></body></html>

通用method4：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box1{width: 500px;height: 500px;border: 1px solid red;position: relative;}.box2{width: 200px;height: 200px;border:1px solid green;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}//使用css3属性</style></head><body><div class="box1"><div class="box2"></div></div></body></html>

box2宽高已知时：（或不用定位，计算后用margin来实现）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box1{width: 500px;height: 500px;border: 1px solid red;position: relative;}.box2{width: 200px;height: 200px;border:1px solid green;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;}</style></head><body><div class="box1"><div class="box2"></div></div></body></html>

当需要文字（inline）居中时：line-height:容器高度； text-align:center;(父元素）

当需要图片居中时：可用method1或给父元素line-height:容器高度；img vertical-align：middle；

阅读全文

0 0