居中的五种方式

来源：互联网发布：网络品牌注册怎么回事编辑：程序博客网时间：2024/05/16 15:44

居中的方式：
首先我们新建一个html文件，如下；

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8" />  <title>Document</title>  <style>    .box{      height: 100px;      width: 100px;      background: #C6562A;    }  </style></head><body>   <div class="box"></div></body></html>

水平居中；

margin:0 auto;

效果如下图：
这里写图片描述
2.1 绝对定位中的水平垂直居中

.box{      width: 100px;      height: 100px;      background: #17B924;      position: absolute;      top: 0;      left: 0;      bottom: 0;      right: 0;      margin: auto;    }

这里写图片描述
这里我为了图片的效果我给box加一个father div
2.2

 .box{      position: absolute;/* 这里只能用绝对定位 */      width:80px;      height:60px;      top: 50%;      left: 50%;      margin: -30px 0 0 -40px;      background-color: yellow;    }

这里写图片描述
这里我为了图片的效果我给box加一个father div
3.

.box{      position: absolute;    /* 相对定位或绝对定位均可 */      width:80px;      height:60px;      top: 50%;      left: 50%;      transform: translate(-50%, -50%);      background-color: green;   /* 方便看效果 */    }

这里写图片描述
4

.father{      display: flex;      align-items: center;    /* 垂直居中 */      justify-content: center;  /* 水平居中 */    }    .box{      width: 100px;      height: 100px;      background-color: red;   /* 方便看效果 */    }

这种方法理论上是可以用的但是因为浏览器兼容的问题，没有实现效果。

阅读全文

0 0