<!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>
原文地址:https://www.cnblogs.com/GreenRadish/p/11319134.html
时间: 2024-10-11 01:00:54