元素居中的六种方法
Posted greenradish
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了元素居中的六种方法相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box width: 500px; height: 500px; border: 2px solid red; /* 第二种方法 */ /* display: flex; justify-content: center; align-items: center;*/ /* 将主轴方向扭转 */ /* flex-direction: column; */ /* 多余部分是否换行 */ /* flex-wrap: nowrap; */ /* flex-direction 与 flex-warp 简写形式 */ /* flex-flow: column nowrap; */ /* 第三种方法 */ /* position: relative; */ /* 第四种 */ /* text-align: center; */ /* 第五种方法 */ /* position: relative; */ /* 第六种 方法 使用表格 */ /* display: table-cell; vertical-align: middle; */ .div width: 200px; height: 200px; background-color: aqua; /*第一种 元素居中 */ /* margin: 150px auto; */ /* 第三种 使用定位 */ /* position: absolute; top:150px; left: 150px; */ /* 第四种 将子元素 转为行内块元素 在 用text-align:center;*/ /* display: inline-block; */ /* 第五种 子元素 加定位 0px 再加 margin :auto; */ /* position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; */ /* 第六种方法 */ /* margin: 0 auto; */ </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html>
以上是关于元素居中的六种方法的主要内容,如果未能解决你的问题,请参考以下文章