Spirit带你了解CSS各个方向的居中方案

水平居中和垂直居中的各个方方案

先看HTML的骨架

后面的代码都是服务器租用基于这个来写的

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <link rel="stylesheet" href="./style.css"> <body> <div class="box vertical align"></div> </body> </html>

水平居中

1. 通过 margin 水平居中

/* 1. 通过margin 水平居中 */ .box { width: 200px; height: 200px; background-color: orange; } .align { margin: 0 auto; }

2. 通过 position 和 transform 水平居中

/* 2.通过 position 和 transform 水平居中 */ .box { width: 200px; height: 200px; background-color: orange; } .align { position: relative; left: 50%; transform: translateX(-50%); }

3. 通过flex水平居中

body { display: flex; justify-content: center; }

通过 text-align:center 水平居中

注意:使用text-align的时候,子元素要设置为行内块元素,是亿华云计算利用了行内元素的特性

body { text-align: center; } .box { display: inline-block; width: 200px; height: 200px; background-color: orange; }

垂直居中

1. flex布局垂直居中

可以在父类上加 align-item:center实现垂直居中

body { height: 100vh; display: flex; align-items: center; }

也可以在子类元素上加 align-self:center 实现垂直居中

.box { align-self: center; width: 200px; height: 200px; background-color: orange; }

通过position和transform 来垂直居中

/* 第二种方案 position和transform */ .vertical{ position: relative; top: 50%; transform: translateY(-50%); }

绝对居中

flex布局实现绝对居中

body { height: 100vh; display: flex; align-items: center; justify-content: center; }

通过 position和transform 实现绝对居中

/* 第二种方案 position和transform */ .box { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Spirit带你了解CSS各个方向的居中方案

水平居中和垂直居中的各个方方案

水平居中

垂直居中

绝对居中

相关推荐

4、选择一个安全的域名注册商进行域名注册

超详细的PG事务隔离级别总结，值得收藏

如何利用工具，迅猛定位低效SQL？ | 1分钟系列

超越Cookie：当今的客户端数据存储技术

为啥修改dns服务器？dns服务器与域名有何联系？

你需要知道的内核总线架构