CSS水平居中的三种方法
2024-10-13 03:57:38
CSS中经常会用到元素居中，那么今天我为大家分享几种水平居中的方法，下面代码都可以达到同样的居中效果，来不及解释了，快上马（码）：
一、margin : 0 auto;
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background: pink;
}
p {
width: 50px;
height: 50px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
此种方法适用于块级标签在父级块标签内使用；
注意事项：父级标签必须是块级标签。如果父级不设宽度，body 内一级元素默认为浏览器宽度。
二、position+margin ;
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,
p {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: pink;
position: relative;
}
p {
width: 50px;
height: 50px;
background: red;
position: absolute;
top: 0;
left: 25px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
此种方法运用相对定位实现：定位脱离文档流，不占用宽高；
注意事项：父级元素必须要给相对属性： Position: relative; 。
三、position+margin （百分比）;
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,
p {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: pink;
position: relative;
}
p {
width: 50px;
height: 50px;
background: red;
position: absolute;
top: 0;
left: 50%;
margin-left: -25px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
此种方法主要适用于浏览器通栏定位；
注意事项：position 定位 left：50%，需要向左移动宽度一半的距离。
最新文章
- 安卓Design包之AppBar和Toolbar的联用
- 面向小白的JS笔记 - #Codecademy#学习笔记
- 使用yuicompressor-maven-plugin压缩js及css文件
- HTTP refere
- 3563: DZY Loves Chinese - BZOJ
- 初识io流条件状态
- 【转】Android属性之build.prop，及property_get/property_set
- initMethod 和 afterPropertiesSet 以及 AwareMethod方法的执行时机
- OpenGL蓝宝书第五章代码勘误以及惯性坐标系去解释模型变换:Pyramid.cpp
- WPF 控件之ComboBox绑定[2]
- IT忍者神龟之使用 PowerDesigner
- Linux/UNIX先进I/O
- matlab和C语言的break及continue测试
- arcgis api 3.x for js 之 echarts 开源 js 库实现地图统计图分析（附源码下载）
- pytorch怎么抽取中间的特征或者梯度
- 天府大讲堂：5G时代的物联网发展趋势与产业变革
- IIS多个应用程序共享Session
- 理解inode 以及 软链接和硬链接概念区分
- 在Android Native层中创建Java虚拟机实例
- JavaWeb基础—会话管理之Session