<!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>
* {
margin: 0;
padding: 0;
}
/*1, 宽高未知,使用transforms属性的translate平移 */
.box1{
padding: 20px;background: orange;color: #fff;border-radius: 5px;
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
/* 2,宽高已知,div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】 */
/* .box2 {
width: 200px; height: 200px;background: green;
position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;
color: white;text-align: center;line-height: 200px;
} */
如何让一个div盒子水平垂直居中(实现代码如下:)
最新推荐文章于 2023-11-03 10:33:06 发布
本文介绍了如何使用CSS将一个div元素水平和垂直居中对齐。通过示例代码,详细讲解了不同方法,包括Flexbox和CSS Grid等现代布局技术。
摘要由CSDN通过智能技术生成